-2

这段代码运行时怎么会像它一样创建一个下拉列表？

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 标记，但出于某种原因，我在过去的一个小时里一直在尝试，但仍然无法完全理解它。资料来源：如何制作基于纯 CSS 的下拉菜单？

4

2 回答 2

1

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

这是将每个列表项显示为菜单条目的部分

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

这是隐藏子菜单的部分

li ul {
display: none;
}

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

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

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

于 2013-09-19T11:37:46.703 回答
0

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

li ul {
display: none;
}

它被隐藏了...

于 2013-09-19T11:35:57.143 回答