Hello,
As suggested on the superfish homepage (http://users.tpg.com.au/
j_birch/plugins/superfish/#download) i am posting here with a problem
i am experiencing.... its probably user error, but i cant seem to get
it to work properly.
The problem is that when users hover of the menu "buttons" and a user
start mousing around in the menu the menu "button" turns back to the
normal (non-hover) image, when it should stay as the hover-state
image.
The example available on the superfish site works the way i desire,
but my usage is a bit more complicated because my menu buttons (top-
most list item <li>) are images and not simple css background colors.
and assistance would be greatly appreciated, i have been working on
this for hours :(
i am pasting my css and html code, i hope google groups wont break it.
html code:
<div id="nav">
<ul class="hcb_sfnav">
<li class="" id="nav-aboutus"><a href="aboutus.php" title="About
Us">About Us</a>
<ul>
<li><a href="aboutus/news">News</a></li>
<li><a href="'aboutus/mission">Mission Statement</a></li>
<li><a href="aboutus/portfolio">Portfolio</a></li>
</ul>
</li>
<li style="z-index: 9999;" class="" id="nav-services"><a
href="services.php" title="Services">Services</a>
<ul>
<li><a href="services/consultation">Consultation</a></li>
</ul>
</li>
<li style="z-index: 9999;" class="" id="nav-support"><a
href="support.php" title="Support">Support</a>
<ul>
<li><a href="support/knowledgebase">Knowledge Base</a></li>
</ul>
</li>
<li class="" id="nav-contactus"><a href="contact.php" title="Contact
Us">Contact Us</a>
<ul>
<li><a href="contactus/general">General Inquiries</a></li>
<li><a href="contactus/help">Get Help</a></li>
<li><a href="directory.php">Contact Directory</a></li>
</ul>
</li>
</ul>
</div>
css-code:
#nav { line-height: 1; z-index: 9998; }
#nav a {
display: block;
height: 30px;
text-indent: -999em;
overflow: hidden;
border: 0px;
}
#nav li { float: left; position: relative; }
* html #nav li * { position: relative; }
#nav li, #nav ul { margin: 0; padding: 0; list-style:none;}
/*--- Default ---*/
#nav-aboutus { background-image: url(test/res/gui/about.png); width:
72px;}
#nav-services a { background-image: url(test/res/gui/
servicessprite.png); width: 91px; }
#nav-support a { background-image: url(test/res/gui/support.png);
width: 91px; }
#nav-contactus a { background-image: url(test/res/gui/contact.png);
width: 91px; }
/*--- Hovering ---*/
#nav-aboutus a:hover { background-image: url(test/res/gui/
abouthot.png); width: 72px; }
#nav-services a:hover { background-image: url(test/res/gui/
servicessprite.png); width: 91px; }
#nav-support a:hover { background-image: url(test/res/gui/
supportsprite.png); width: 91px; }
#nav-contactus a:hover { background-image: url(test/res/gui/
contactussprite.png); width: 125px; }
/*--- Clicking ---*/
#nav-aboutus a:active { background-image: url(test/res/gui/
abouthot.png); width: 72px; }
#nav-services a:active { background-image: url(test/res/gui/
serviceshot.png); width: 98px; }
#nav-support a:active { background-image: url(test/res/gui/
supporthot.png); width: 91px; }
#nav-contactus a:active { background-image: url(test/res/gui/
contacthot.png); width: 91px; }
/*--- Dropdowns ---*/
#nav li.over ul { left: 0; display: block;}
#nav li li { float: none; position: static; width: 100%; }
#nav li li a, #nav li li a:hover, #nav li li a:active {
background: none;
height: auto;
padding: 5px 10px 5px 10px ;
text-indent: 0;
width: 155px;
}
#nav li li a { color: #ffffff; text-decoration: none;}
/* hover for all menu items */
#nav li li a:hover { background: #ac8c6b; color: #ffffff;}
/* menu characteristics */
#nav li ul {
background: #784e25;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
border: 1px solid #2D2D2D;
border-top: 0px solid #2D2D2D;
display: none;
line-height: 1.5;
padding: 2px;
position: absolute;
top: 30px;
width: 175px;
z-index: 9999;
}
