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。这是这个精灵的当前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除外）

Answer 2

给#nav li一个位置：relative

如您指定的那样在ul中插入ul。样式#nav ul li ul to position：absolute。给它一个宽度和高度以及px中的顶部和左侧位置。和背景颜色。（测试它在你设置display none之前显示）。将其设置为display：none

然后在#nav li a：hover ul使它显示：block

（我认为这应该有用）

精灵导航下拉菜单

2 个答案: