试图在CSS3中创建一个下拉列表

Question

我一直在努力解决这个问题但没有成功，因为某些原因子列表没有显示出来！我试过：nav > ul > li:hover > ul{}但这似乎打破了代码的功能。我确信这是一个非常简单的问题。

nav > ul {
  list-style: none;
}
nav > ul > li {
  padding: 20px;
  float: left;
}
nav > ul > li {
  background-color: #fff;
}
nav > ul > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav > ul > ul > li {
  float: none;
  width: 200px;
}
nav > ul > li:hover {
  color: #4169E1;
  display: block;
  visibility: visible;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Secure</li>
    <ul>
      <li>How secure are we?</li>
      <li>We are not secure enough!!</li>
    </ul>
    <li>Mad</li>
  </ul>
</nav>

Answer 1

• 简化您的选择器（nav ul ul）很好

• 制作父li position: relative，以便position: absolute下拉列表与其相关。使用适当的top值

• 在您的示例中，visibility: visible没有做任何事情。 display: none和display: block用于隐藏/显示

• 正确嵌套列表。这是正确的方法：

<ul>
    <li>Top Menu Item
        <ul>
            <li>Sub-menu Item</li>
        </ul>
    </li>
</ul>

了解详情：Nested lists on w3.org

CSS / HTML / Demo

* {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav ul ul li {
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us
      <ul>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
      </ul>
    </li>
    <li>Secure
      <ul>
        <li>How secure are we?</li>
        <li>We are not secure enough!!</li>
      </ul>
    </li>
    <li>Mad</li>
  </ul>
</nav>

Answer 2

指出你遇到的一个错误

   <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Secure
           <ul> **--> this should be inside li** 
                <li>How secure are we?</li>
                <li>We are not secure enough!!</li>
            </ul>
        </li>

        <li>Mad</li>
    </ul>

和你的css

添加此

nav > ul > li:hover > ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

检查小提琴 http://jsfiddle.net/ruchan/4fk6y2wu/

Answer 3

使用更多 css3 电源！

请参阅Demo here

请参阅Fullscreen

<nav>
    <ul id="menu">
        <li class="category top_level"><a class="selected" href="#">Home</a></li>
        <li class="category top_level"><a href="#">About</a></li>
        <li class="category top_level"><a href="#">Secure</a>
                    <ul class="dropdown">
                <li class="item"><a href="#">How secure are we?</a></li>
                <li class="item"><a href="#">We are not secure enough!!</a></li>
            </ul>
        </li>
        <li class="category top_level last"><a href="#">Mad</a>
        </li>
    </ul>
</nav>

<强> CSS

body {
    font-family:'Montserrat', sans-serif;
    background:#000;
}
ul {
    list-style-type: none;
}
#menu a {
    text-decoration: none;
    white-space: nowrap;
    color: #222;
    background-color: #fff;
}
#menu li.top_level {
    vertical-align: top;
    zoom: 1;
    display: block;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    position: relative;
    text-align:center;
}
#menu li.last {
    margin-right: 0px;
}
#menu .dropdown {
    float: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
    height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
    line-height:2em;
    display:block;
    padding:.6em;
    border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
    background:#007dac;
    -webkit-transition: background-color 940ms;
    -moz-transition: background-color 940ms;
}
#menu a.selected {
    color: #ffffff;
    background-color: #007dac;
}