html - Sprite 导航上的下拉菜单

Question

我需要在基于一个图像 (CSS Sprite) 的导航中放置一个下拉菜单。我已经尝试了几个小时，但我就是想不通。这是 HTML:

<ul id="nav">
                <li class="nav-1"><a href="/">Storage Auctions</a></li>
                <li class="nav-2"><a href="/blog.php">Blog</a></li>

                <li class="nav-3"><a href="/about.php">About</a>



                </li>

                <li class="nav-4"><a href="/contact.php">Contact</a></li>
                <li class="nav-5"><a href="/faq.php">FAQ</a></li>
            </ul> 

我需要下拉菜单到“关于”链接下。我知道它必须放在“li”标签中，但我无法正确使用 CSS。这是这个 Sprite 的当前 CSS:

ul#nav {
     margin:75px 0 0 0; 
     padding:0; 
     list-style:none;
     clear: both;    
}

 #nav li {
     overflow:hidden; 
     text-indent:-9999px; 
     display:inline; 
     float:left; 
     width: 398px;
}

#nav li a {
    background:url(../images/nav-sprite.jpg) no-repeat; 
    width: 398px; 
    height: 40px; 
    display:block;
}


 #nav li.nav-1 {width:85px; height:40px;}
 #nav li.nav-1 a:hover{background-position:0px -40px;}  

 #nav li.nav-2 {width:80px; height:40px;}  
 #nav li.nav-2 a:hover{background-position:-85px -40px;} 
 #nav li.nav-2 a{background-position:-85px 0px;} 

 #nav li.nav-3 {width:82px; height:40px;}  
 #nav li.nav-3 a:hover{background-position:-165px -40px;} 
 #nav li.nav-3 a{background-position:-165px 0px;} 

 #nav li.nav-4 {width:97px; height:40px;}  
 #nav li.nav-4 a:hover{background-position:-247px -40px;}
 #nav li.nav-4 a{background-position:-247px 0px;}  

 #nav li.nav-5 {width:54px; height:40px;}  
 #nav li.nav-5 a:hover{background-position:-344px -40px;} 
 #nav li.nav-5 a{background-position:-344px 0px;}

如有任何帮助，我们将不胜感激!

Answer 1

将所有样式放在 A 标签上，而不是 LI。 (float:left 除外)