...

View Full Version : Different :hover state not working in Chrome/Safari



jaffee
01-11-2010, 03:48 PM
Hello

I'm having an issue with a flyout/dropdown menu that I've created. In the submenu section, there are 5 options, which should go from gray to orange when the user hovers over them. It works great in FF3, however the options simply disappear when the user hovers over them in Chrome and Safari. You can see the issue I'm describing here: http://www.jaffydesigns.com/2010_redesign

Any help you guys could provide would be much appreciated!

Below is the relevant code for the menus:

HTML


<div id="nav_bg">
<div id="nav_content">
<div id="nav_wrapper">
<ul id="nav">
<li class="top"><a href="#top" class="top_link"><span>About</span></a></li>
<li class="top"><a href="#web" class="top_link"><span class="down">Portfolio</span></a>
<ul class="sub">
<!-- In case you ever need a tertiary menu, un-comment the section below -->
<!-- <li class="fly"><a href="#web" class="fly">Web</a>
<ul>
<li><a href="#email">Email</a></li>
<li><a href="#logo">Logo</a></li>
<li><a href="#print">Print</a></li>
</ul>
</li> -->
<li><a href="#web">Web</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#logo">Logos</a></li>
<li><a href="#print">Print</a></li>
<li><a href="#other">Other</a></li>
<li class="bottom"></li>
</ul>
</li>
<li class="top"><a href="#contact" id="services" class="top_link"><span class="down">Contact</span></a>
<ul class="sub">
<li><a href="#phone">Phone</a></li>
<li><a href="#form">Email</a></li>
<li><a href="#twitter">Twitter</a></li>
<li><a href="#linkedin">LinkedIn</a></li>
<li><a href="#skype">Skype</a></li>
<li class="bottom"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>


CSS

#nav {padding:0; margin:19px 0 0 0; list-style:none; height:36px; position:relative; z-index:500; font-family: arial, helvetica, sans-serif;}
#nav li.top {display:block; float:left; padding-top:5px;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; text-decoration:none; font-size:1em; font-weight: bold; cursor:pointer; outline: none}
#nav li a.top_link span {float:left; display:block; padding:9px 11px 0 11px; height:36px; font-size: 18px; color: #FF9900; text-decoration: none; line-height: 1em; outline: none}
#nav li a.top_link span.down {float:left; display:block; background: url(../images/nav_drop.gif) 0 0 no-repeat; padding:9px 20px 0 36px; height:36px; outline: none}
#nav li a.top_link:hover {color:#ffffcc; outline: none; background: url(../images/nav_about_bg.jpg) 0 0 no-repeat;}
#nav li a.top_link:hover span.down {background: url(../images/nav_drop_bottom.gif) left bottom no-repeat; color: #ffffcc; padding-top: 9px; outline: none}
#nav li:hover > a.top_link {color: #ffffcc; outline: none}
#nav li:hover > a.top_link span {background:url(../images/blank_over.gif) no-repeat right top; color: #ffffcc; outline: none}
#nav li:hover > a.top_link span.down {background: url(../images/nav_drop_bottom.gif) 0 0 no-repeat; color: #ffffcc; padding-top: 9px; outline: none}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; background:#fff;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul
{left:-57px; bottom:36px; top:auto; white-space:nowrap; overflow: hidden; background:url(../images/flyout_top.png) center top no-repeat; width:165px; height:auto; padding:11px 0 0 15px; z-index:300;}
* html #nav li:hover ul {width:0;}
#nav li:hover ul li a
{float: left; width: 73px; height: 31px; margin: 1px 1px 0 0; font-size: .7em; color: #FFFFFF; text-decoration: none; text-align: center; background: #666666; border: 1px solid #999999; outline: none}
#nav li:hover ul li.bottom {clear: both; background: url(../images/flyout_bottom.png) 0 0 no-repeat; border:0; width: 179px; height: 11px; margin-left: -14px;}
#nav li:hover ul li.bottom:hover {clear: both; background: url(../images/flyout_bottom.png) 0 0 no-repeat; border:0; width: 179px; height: 11px; margin-left: -14px;}
/*#nav li:hover ul li a
{display:block; font-size:11px; height:20px; line-height:20px; padding:0 5px; color: #FFFFFF; text-decoration:none;}*/

#nav li:hover ul li a:hover {background:#FF9900; border: 1px solid #ffcc66; text-decoration:underline; outline: none}
/*#nav li:hover ul li a:hover {text-decoration:underline;}*/

thefurryfrog
01-29-2011, 04:50 PM
hi there, did this issue get solved as i am having the same issue myself

cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum