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

问题描述

一直在尝试获得纯 css"下拉列表几天来一直在尝试获得简单"的 css 下拉导航，可以显示顶层并隐藏第二层，但无法使子项在悬停时显示?任何帮助非常感谢示例隔离在这里::粘贴箱下方的 css 和 htmlhttp://www.webdevout.net/test?01t

解决方案

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

<ul class="一级"><li><a href="/about/" title="about">about</a></li><li><a href="/contact/" title="contact">contact</a></li><li><a href="/feeds/latest/" title="订阅">订阅</a></li><li><a href="/Test1/" title="Test1page">Test1</a><ul class="二级"><li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li><li><a href="/Test2/" title="Test2 页面">Test2</a><ul class="二级"><li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li></ul></li>

如果您使用以下 css:

.level-one {display: inline;位置:相对；}.level-one {显示:无；位置:绝对；左:0；顶部:1em；/* 根据需要调整 */}.level-one:hover .level-two {display: block;}

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

此外，由于我假设您对此还很陌生，因此我想为您提供以下参考资料:

• 关于 CSS 菜单的所有时髦和美妙的东西:CSS Play，作者:Stu Nicholls.
• 有关一些方法和原因的介绍:A List Apart.
• 简要介绍，来自 Eric Meyer.

有几十个，如果不是几百个，还有更多……

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

解决方案

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>

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:

• 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屋！