Question

为什么运行此代码时，它会像它一样创建一个下拉列表？

HTML

   <ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>

CSS

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  border-top: 1px solid #fff;
  padding: 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

我知道上面代码中使用的所有CSS属性和HTML标记，但由于某种原因，我一直在尝试过去一小时但仍然无法完全理解它。资料来源：How to make a pure css based dropdown menu?

Answer 1

它基本上将样式添加到无序列表中，使其外观和行为类似于菜单。

这是将每个列表项显示为菜单项

的部分

ul li {
display: block;
position: relative;
float: left;
}

这是隐藏子菜单的部分

li ul {
display: none;
}

这是在每个主菜单条目上移动鼠标时显示子菜单的部分

li:hover ul {
display: block;
position: absolute;
}

其余的只是用于格式化字体和颜色。

Answer 2

当悬停在li上时，它会将UL的显示设置为阻止，这将显示该项目的下拉列表。

li ul {
display: none;
}

它隐藏了......

愿有人向我解释这个html / css代码吗？

2 个答案: