我需要在基于一个图像(CSS Sprite)的导航上放置一个下拉菜单。我一直在尝试几个小时,但我无法弄清楚。这里的HTML:Sprite导航下拉菜单
<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;}
任何帮助将不胜感激!
谢谢你,现在我要去尝试这种权利。我希望我会在我的初始文章中做到这一点,但是,这里有一个很好的工作示例: http://jsfiddle.net/kennyk3/TTDNp/ – kennyk3 2012-02-15 16:14:12
我尝试了您的示例,但不幸的是,它无法正常工作。我从来没有这么麻烦搞清楚CSS。我真的只需要一个简单的下拉菜单,其中有两个项目。如果任何人都可以检查上面的jsfiddle并提出解决方案,我将不胜感激。 – kennyk3 2012-02-15 16:22:56
再次嗨。这主要是因为你的疯狂风格,它没有工作,文本缩进等。我为你创建了一个新的小提琴,它有我的变化并使其工作。请注意,我添加的li:hover可能与所有浏览器不兼容,我可能会使用jquery作为备份。 http://jsfiddle.net/mq8xX/ – plebksig 2012-02-17 10:16:17