Sprite导航上的下拉菜单

Question

我需要把一个下拉菜单上的导航是基于一个图像(CSS雪碧图)。我已经试了几个小时了，就是想不通。下面是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。这是这个精灵的当前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-tag上，而不是LI上。(float:left除外)

Answer 2

给#nav li一个位置:相对

按照您指定的方式在li中插入ul。风格#nav ul li ul to position:绝对。给它一个宽度和高度以及px中的顶部和左侧位置。和背景颜色。(在设置display none之前测试它显示的内容)。将其设置为显示:无

然后在#nav li a:hover ul使其显示: block

(我认为这应该是可行的)