CSS下拉菜单 [英] CSS drop down menu

问题描述

试图得到一个纯css下拉
一直在试图获得一个简单css下拉导航去获得顶级显示和第二级隐藏，但不能使子悬停时显示项目？任何帮助非常感谢样品分离在这里::
css和html下面粘贴bin
http://www.webdevout.net/test?01t

Been trying to get a "pure css" dropdown been trying for days to get a "simple" css drop down nav going can get the top level displayed and the second level hiding but can't make the sub items display on hover?? any help much appreciated sample Isolated is here:: css and html below paste bin http://www.webdevout.net/test?01t

推荐答案

您的问题可能是因为您错误地构造了你的HTML。子菜单（ .level-two ）应嵌套在 .level-one li 元素：

Your problems are probably because you've constructed your html wrongly. The sub-menu (.level-two) should be nested within the .level-one li elements:

<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：

If you then use the following 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; }

我认为这应该足以让你开始。随时可以在评论中提出任何问题，或更新您的问题。

I think that should be enough to get you started. Feel free to ask any questions in comments, or update your question.

此外，由于我假设你是相当新的，我想提供您可以使用以下引用：

Also, since I'm assuming you're fairly new to this, I'd like to offer you the following references:

• 对于CSS菜单中的所有东西来说都很奇怪：
  
• 如需了解一些操作方法的介绍，请访问 =http://www.alistapart.com/articles/hybrid/ =nofollow noreferrer> A List Apart 。


• 简短介绍，从 Eric Meyer 。

• For all things snazzy and wonderful with CSS menus: CSS Play, by Stu Nicholls.
• For an intro to some of the hows and whys: A List Apart.
• A brief introduction, from Eric Meyer.

有几十个，如果不是数百，更多被发现...

There are dozens, if not hundreds, more to be found...

这篇关于CSS下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！