CSS下拉菜单

一直试图获得“纯CSS”下拉菜单
尝试了几天以获得“简单”的CSS下拉导航,可以显示顶层,隐藏第二层,但是不能使子项悬停显示吗？任何赞赏的样品隔离帮助都在这里：
CSS和HTML下面粘贴bin
http://www.webdevout.net/test?01t

最佳答案

您的问题可能是因为您错误地构建了html.子菜单(.level-two)应嵌套在.level-one li元素内：

<div id="navtree">
<ul class="level-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/Feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="level-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

如果然后使用以下css：

.level-one {display: inline; position: relative; }

.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.level-one:hover .level-two {display: block; }

我认为这应该足以让您入门.随时在评论中提问或更新您的问题.

另外,由于我假设您对此尚不陌生,所以我想为您提供以下参考资料：

>使用CSS菜单,所有功能都令人眼前一亮和精彩：Stu Nicholls编写的CSS Play.
>有关某些操作方式和原因的简介：A List Apart.
>简介,始于Eric Meyer.

有数十种甚至数百种可供发现…

CSS下拉菜单

相关文章