Need help with css menu div tags, don't work when active.

Hi

I need some help with my menu css / div tags as i messed it up when i was working on it a while ago. Now, when you push a button it doesn't stay hovered (active) but the 1st button is always active. CSS and .tpl file is below:

CSS

.rt-fusionmenu {
    width: 960px;

    padding: 0 0px 0 0px;
    background: #f8f8f8;
    margin-left: -9px;
    border-radius: 6px;    
    -moz-box-shadow:    0px 0px 10px #d8d8d8; 
    -webkit-box-shadow: 0px 0px 10px #d8d8d8; 
    box-shadow:         0px 0px 10px #d8d8d8;    
    position: relative;
    z-index: 6;
}
ul.level1 {
    padding: 0 1px;
}
ul.level1 li {
    background: url(http://pricell.com/images/separator.gif) 0 0 repeat-y;
    padding: 10px 10px 10px 9px;
}
ul.level1 li:first-child {background: none;}




.menutop li {height: auto;margin: 0;padding: 0;position: relative;list-style: none;}
.menutop em {font-size: 80%;font-weight: normal;display: block;font-style: normal;}
.menutop li .item, .menutop li.active .item {display: block;margin: 0;text-decoration: none;float: none;width: auto;}
.menutop li .fusion-submenu-wrapper {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}

/* Root Items */
.menutop {list-style: none;margin: 0;padding: 0 10px;position: relative;line-height: 1em;display: inline-block;}
.menutop li.root {float: left;}
.menutop li.root > .item {
color:#000;
	white-space: nowrap;
	display: block;
	padding: 0px;
	font-size: 1em;
	z-index: 610000!important;
	cursor: pointer;
	position: relative;
	margin: 0px;
	outline: none;
	height: 45px;    
    width: 140px;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
	
.menutop li.root > .item:hover,
.menutop li.root.active > .item,
.menutop li.root.f-mainparent-itemfocus > .item {
color:#FFF;
    background-color: #f5922a;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5922a), to(#f37220)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #f5922a, #f37220); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #f5922a, #f37220); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #f5922a, #f37220); /* IE10 */
	background-image:      -o-linear-gradient(top, #f5922a, #f37220); /* Opera 11.10+ */
	background-image:   linear-gradient(to bottom, #f5922a, #f37220);
}

.menutop li.root > span.item{cursor:default;}	

.menutop li.root > .item span {

    display: block;
    margin: 0;
    outline: none;
    width: auto;
    line-height: 42px;
}
.menutop li.root > .item em {font-size: 10px;display: block;text-transform: lowercase;line-height: 0.3em;}
.menutop li.parent.root .item span {
   
}
.menutop li.root .subtext span {line-height: 1.9em;}
.menutop li.root > .item img {margin: 0 4px 0 0;vertical-align: text-bottom;}

/* Dropdown Surrounds */
.menutop ul {padding: 0; margin: 10px 0 0px 12px; float: left;}
.menutop .drop-bot {height: 1px;overflow: hidden;clear: both;}
.menutop .fusion-submenu-wrapper {height: auto !important;}

.menutop ul {
    background-color: #F8F8F8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#262626)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #F8F8F8, #262626); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #F8F8F8, #262626); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #F8F8F8, #262626); /* IE10 */
	background-image:      -o-linear-gradient(top, #F8F8F8, #262626); /* Opera 11.10+ */
	background-image:   linear-gradient(to bottom, #F8F8F8, #262626);
    padding: 20px 0 18px;
}
.menutop ul.level2 {
    margin-top: 0px; 
    margin-left: 0px;
}

/* Dropdown Items */
.menutop ul li {padding: 0;display: block;}
.menutop ul li > .item {
	padding: 0 15px;
	height: auto;
	display: block;
	font-size: 11px;
    line-height: 30px;
	cursor: pointer;
}
	
.menutop ul li > .item:hover,
.menutop ul li.active > .item,
.menutop ul li.f-menuparent-itemfocus > .item {
    background: url(http://pricell.com/images/nav-hov.gif) 0 0 repeat-x #373737;
}

.menutop ul li > .item span {display: block;width: 100%;overflow: hidden;line-height: 3em; text-transform: uppercase;}
.menutop ul li .item img {float: left;margin: 8px 6px 0 0;vertical-align: top;}
.menutop ul li .nolink span {display: block;}
.menutop ul li span.item {cursor: default;outline: none;}
.menutop ul li .subtext span {line-height: 1.9em;}
.menutop ul li .subtext em {line-height: 0.6em;padding-bottom: 7px;text-transform: lowercase;}

/* No JS */
.menutop li.root:hover > .fusion-submenu-wrapper {top: 35px;left: 0;}
.menutop ul li:hover > .fusion-submenu-wrapper {left: 180px;top: 0;}

/* Fusion JS */
.fusion-js-container {display: block;height: 0;left: 0;overflow: visible;position: absolute;top: 0;z-index: 600000!important;background: transparent !important;}
.fusion-js-subs {display: none;margin: 0;overflow: hidden;padding: 0 !important;position: absolute;}

/* Grouped & Modules */
.menutop .fusion-grouped {padding-bottom: 10px;}
.menutop .fusion-grouped ol {padding: 0;}
.menutop .fusion-grouped ol li {padding: 0 15px;}
.menutop .fusion-grouped ol li .item {padding: 0 15px;}
.menutop .fusion-grouped ol li span {font-size: 85%;line-height: 2em;}
.menutop .type-module ol {padding: 0;}
.menutop .type-module ol li {padding: 0;}
.menutop .type-module ol li .fusion-modules {background: none;}
.menutop .type-module ol li .fusion-module {padding: 0;background: none;overflow: hidden;}
.menutop .fusion-module, .menutop .fusion-modules, .menutop .fusion-grouped {display: block;}
.menutop .fusion-modules.item {padding: 15px;}
.menutop .fusion-module em {display: inline;font-size: inherit;font-style: italic;}
.menutop .fusion-module a {font-size: inherit;line-height: 130%;}
.menutop .fusion-module p, .menutop .fusion-modules p {line-height: 160%;}
.menutop ul li.grouped-parent > .daddy span {background: none;}

Code (markup):

.TPL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
  

    <div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
    <ul class="menutop level1">
                        <li class="menutop li root f-mainparent-itemfocus item">
                            <a class="orphan item bullet" href="/listing/featured/" id="a-1340322007432727">
                    <span>
                                        Featured                                                            </span>
                </a>
            
                    </li>
                                <li class="item116 parent root f-main-parent f-mainparent-item">
                            <a class="daddy item bullet" href="/listing/newlisting/" id="a-134032200743361">
                    <span>
                                        New Listings                                                            </span>
                </a>
            
                                                
                                    </li>

 <li class="item116 parent root f-main-parent f-mainparent-item">
                            <a class="daddy item bullet" href="/listing/mostactive/" id="a-134032200743361">
                    <span>
                                        Most Active                                                            </span>
                </a>
            
                                                
                                    </li>

 <li class="item116 parent root f-main-parent f-mainparent-item">
                            <a class="daddy item bullet" href="/listing/endingsoon/" id="a-134032200743361">
                    <span>
                                        Ending Soon                                                           </span>
                </a>
            
                                                
                                    </li>

 <li class="item116 parent root f-main-parent f-mainparent-item">
                            <a class="daddy item bullet" href="/listing/justsold/" id="a-134032200743361">
                    <span>
                                        Just Sold                                                           </span>
                </a>
            
                                                
                                    </li>
                              

 <li class="item116 parent root f-main-parent f-mainparent-item">
                            <a class="daddy item bullet" href="/tags/" id="a-134032200743361">
                    <span>
                                        Browse Tags                                                            </span>
                </a>
            
                                                
                                    </li>
 <li class="item118 parent root" >
                            <span class="daddy item bullet nolink">
                    <span>
                                            Services                                                            </span>
                </span>
            
                                                <div class="fusion-submenu-wrapper level2" style="width:180px;">
                        
                        <ul class="level2" style="width:180px;">
                                                                                                        <li class="item119" >
                            <a class="orphan item bullet" href="{$myobj->getUrl('listing', '?list=high-end-websites', 'high-end-websites/', '', $CFG.admin.flippa.folder)}">
                    <span>
                                        HIGH END WEBSITES                                                          </span>
                </a>
            
                    </li>
                                                                                                                                                <li class="item120" >
                            <a class="orphan item bullet" href="{$myobj->getUrl('listing', '?list=mid-range-websites', 'mid-range-websites/', '', $CFG.admin.flippa.folder)}">
                    <span>
                                        MID-RANGE WEBSITES                                                            </span>
                </a>
            
                    </li>
                                                                                                                                                <li class="item121" >
                            <a class="orphan item bullet" href="{$myobj->getUrl('listing', '?list=entry-level-websites', 'entry-level-websites/', '', $CFG.admin.flippa.folder)}">
                    <span>
                                        Entry Level Websites                                                            </span>
                </a>
            
                    </li>
                                                                                            </ul>

                                                <div class="drop-bot"></div>
                    </div>
                                    </li>

                    </ul>
</div>

					<div class="clear"></div>
				</div>
			</div>

Code (markup):

Thank you!

 

what is your site? can i take a look?

 

sure, sent you a pm with link

 

While it's hard to say for certain without seeing the actual page, it appears to me you have endless DIV for nothing, SPAN for nothing, ID's for nothing, and presentational class use defeating the entire point of even using CSS in the first place. Of course that it's a tranny document, and as such in transition from 1997 to 1998 probably isn't helping matters site-wide. That the CSS then goes and uses complex selectors for no good reason with a ton of outright bizarre and pointless code... from fixing the width on elements with dynamic fonts resulting in broken buttons, to declaring values that should be the defaults, to playing endless games with line-height for christmas only knows what reason...

There is NO good reason for the markup there to be anything more than:

<ul id="mainMenu">
	<li>
		<a href="/listing/featured/" class="current">Featured</a>
	</li><li>
		<a href="/listing/newlisting/">New Listings</a>
	</li><li>
		<a href="/listing/mostactive/">Most Active</a>
	</li><li>
		<a href="/listing/endingsoon/">Ending Soon</a>
	</li><li>
		<a href="/listing/justsold/">Just Sold</a>
	</li><li>
		<a href="/tags/">Browse Tags</a>
	</li><li class="hasKids">
		<span>Services</span>
		<ul>
			<li>
				<a href="{$myobj->getUrl('listing', '?list=high-end-websites', 'high-end-websites/', '', $CFG.admin.flippa.folder)}">
					HIGH END WEBSITES
				</a>
			</li><li>
				<a href="{$myobj->getUrl('listing', '?list=mid-range-websites', 'mid-range-websites/', '', $CFG.admin.flippa.folder)}">
					MID-RANGE WEBSITES
				</a>
			</li><li>
				<a href="{$myobj->getUrl('listing', '?list=entry-level-websites', 'entry-level-websites/', '', $CFG.admin.flippa.folder)}">
					Entry Level Websites
				</a>
			</li>
		</ul>
	</li>
</ul>

Code (markup):

EVERYTHING else you have in there is pointless bloat as there's NO reason to be using endless pointless classes like that, NO reason what's being done to those span couldn't have been done to the anchors, and no reason what's being done to those DIV couldn't be applied to the UL instead... much less the clearing DIV that were in there like it's still 2001.

Bottom line, you've got 12k of code doing 4.4k's job.

Try this on for size:
http://www.cutcodedown.com/for_others/oskars/template.html

as with all my examples the directory is unlocked:
http://www.cutcodedown.com/for_others/oskars/

... so you can get at the individual files (like the CSS). Valid XHTML 1.0 Strict, and again, a full third the code. I use overflow to hide the menu, making it much simpler and still keyboard navigable (something the sliding it around with "left" or display none/block aren't), I use px fonts because of how badly auto-enlarging for large font/120dpi or win7 large/144dpi ended up breaking your layout... I played with the style a bit too so as to make it a bit more consistent.

Though really fixing the width of it to 960px is just bad design; at the very least it should be semi-fluid and able to handle width changes, which is why I probably wouldn't have a dropdown in the first place. At the very least it should be inheriting width from a parent element instead of having it set on itself. Makes it easier when it comes time to throw media queries at it to make your small screen version.

Hope this helps.

 

sure, sent you a pm with link