Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2008
    Thanked 0 Times in 0 Posts

    Different :hover state not working in Chrome/Safari


    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:

    <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>
                                						<li><a href="#email">Email</a></li>
                                                        			<li><a href="#logo">Logo</a></li>
                                						<li><a href="#print">Print</a></li>
                                            	</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>
                            <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>
    #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;}*/

  2. #2
    New to the CF scene
    Join Date
    Jan 2011
    Thanked 0 Times in 0 Posts
    hi there, did this issue get solved as i am having the same issue myself



Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts