代码之家 › 专栏 › 技术社区 › dartdog

CSS下拉菜单

drop-down-menu navigation menu css

dartdog · 技术社区 · 15 年前

一直在试图得到一个“纯css”下拉列表几天来一直在尝试获得一个“简单的”css下拉菜单nav GONG可以显示顶层和隐藏第二层,但不能使子项显示在悬停状态??非常感谢您的帮助,请访问: 粘贴箱下方的css和html http://www.webdevout.net/test?01t

3 回复 | 直到 15 年前

David Thomas 15 年前

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

.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 Play ,作者斯图·尼科尔斯。
对于一些如何和为什么的介绍: A List Apart
简介,来自 Eric Meyer .

Nick Craver 15 年前

<ul> 级别必须是子级,您有:

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

dartdog 15 年前

以下是我有点满意的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;}