CSS 下拉菜单答案

【问题标题】：CSS drop down menuCSS 下拉菜单
【发布时间】：2011-01-12 10:12:25
【问题描述】：

一直在尝试获得“纯 CSS”下拉菜单几天来一直在尝试获得一个“简单”的 CSS 下拉导航，可以显示*，隐藏第二级，但不能让子项目在悬停时显示？任何帮助非常感谢的示例隔离在这里:: 粘贴箱下方的 css 和 html http://www.webdevout.net/test?01t

【问题讨论】：

标签： css menu navigation drop-down-menu

【解决方案1】：

您的问题可能是因为您错误地构建了 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; }

我认为这应该足以让您入门。随时在 cmets 中提出任何问题，或更新您的问题。

另外，由于我假设您对此相当陌生，因此我想为您提供以下参考：

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

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

【讨论】：

感谢您的快速响应：那么问题是我正在使用从 Django 导航栏生成的 HTML，它正在生成 HTML.. 任何关于如何在不触及原始模块的情况下更改它的想法，，即继承？ Bettr 还有如何通过 CSS 修复它？？
我还要注意，我可以选择孩子隐藏他们，看代码，为什么我不能让他们出现？？？
也将此帖子发布到 Google 组，用于 Django Navbar 问题 25 code.google.com/p/django-navbar/issues/list
答案似乎已发布到 Google 群组 code.google.com/p/django-navbar/issues/detail?id=25
干得好，我没用过 django，但是 Doug 看起来非常有耐心；这诱使我玩一些。 =)

【解决方案2】：

第二层<ul> 必须是children，你有这个：

<li><a href="/Test2/" title="Test2 page">Test2</a></li>
<ul class="level-two">
 <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>    
</ul>

改成这样：

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

【讨论】：

【解决方案3】：

这是实现三级下拉菜单的 css，我对此感到很满意到目前为止，仅在 FF 中进行了测试：

/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */
ul.level-one{
  margin-left:-10px; /* lines up 1st item with search box*/
}
ul.level-one li{
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  position: relative;
  line-height: 1.3em;
  }
ul.level-one li:hover {
  background:#999ca0;
  }
.level-two {
  display: none;
  position :absolute;
  Left:0;
  top: 1em;
  }
.level-three {
  display: none;
  position :absolute;
  top: 0em;
  }
.level-one li:hover .level-two {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  }
.level-two li:hover .level-three {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  margin-left: 92px;  /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */
  }
.level-three li:hover {display:block;}

【讨论】：