CSS dropdown menu doesn't work in Chrome/Safari

Discussion in 'CSS' started by Jelleke60, Jan 2, 2009.

0
  1. #1
    Hi!,

    I have a problem with this CSS code:

    #menu{position:absolute;width: 922px; height: 52px;}
#menu ul .item{display:none; clear: both; margin-left: 0px;}
#menu ul:hover .item{display:block;background: url(images/bg_dropdown_grey.gif) repeat-x;padding-left:0px;margin:0px; height:21px;width:135px;}

#menu ul:hover .item a{
color:#000;text-decoration:none;}
#menu ul:hover .item a:hover{display: block;color:#FFF; height:21px;background: url(images/bg_dropdown_blue.gif) repeat-x; width:135px;}

#menu ul{float:left;margin:0px;padding:0px; list-style:none;}

.top
{
margin: 0px;
height: 52px;
float: left;
margin-right: 8px;
}
    Code (markup):
    In HTML I use this 
    
<ul>
<li class="top">Main link</li>
<li class="item">dropdown item</li>
</ul>
    Code (markup):
    In Chrome/Safari it doesn't show the bg_dropdown_blue.gif when hovering a menu option. Any solutions?

    Jelle
     
    Jelleke60, Jan 2, 2009 IP