CSS 下拉菜单

Posted 2023-04-13

【中文标题】CSS 下拉菜单

【英文标题】：CSS drop down menu

【发布时间】：2011-01-12 10:12:25

【问题描述】：

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

【参考方案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;