html - 无法为下拉菜单定位 ul 和 li 元素

标签 html css

我对这个菜单进行了编码,我也尝试过其他方法,但在我看来,我无法定位第二个 ul 列表和 il 元素以显示下拉菜单,任何人都可以看到问题吗这段代码?

非常感谢!

HTML:
<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" type="text/css" rel="stylesheet">

  </head>

  <body>
    <div id="nav">
        <div id="wrapper">
          <ul>
            <li>About</li>
            <li>News</li>
            <li>Artists</li>
              <ul>
                <li>Kasi</li>
                <li>Sin</li>
                <li>WORDUP</li>
              </ul>
            <li>Videos</li>
            <li>Store</li>
          </ul>
        </div>
      </div>
  </body>
</html>

CSS:

body {
  padding: 0;
  margin: 0;
  font-size: 20px;

}

#nav {
  background-color: #222;
  color: #FFF;
}

#nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}

#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#nav ul li {
  display: inline-block;
  padding: 5px 25px;
}

#nav ul li:hover{
  color: #FFDF00
}

#nav ul li:hover ul{
  display: block;
}

#nav ul ul{
  display: none;
  position: absolute;
}

最佳答案

您的嵌套 ul 需要在 li 中。只有 li 可以是 ul 的直接子代。

然后使用 CSS 默认隐藏嵌套的 ul,然后当您将鼠标悬停在 li 上时,显示任何嵌套的 ul一个直接的 child 。

ul ul {
  display: none;
}
li:hover > ul {
  display: block;
}
<ul>
  <li>About</li>
  <li>News</li>
  <li>Artists
    <ul>
      <li>Kasi</li>
      <li>Sin</li>
      <li>WORDUP</li>
    </ul>
  </li>
  <li>Videos</li>
  <li>Store</li>
</ul>

关于html - 无法为下拉菜单定位 ul 和 li 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42168449/

相关文章:

css - chrome 中的透明主题颜色

javascript - 如何将 'important' 添加到 zIndex

php - 在整个文档中去除标签的快速方法

android - Objective-C - 在 UITextView 中获取简单的 HTML 源代码 - 没有 CSS 样式

html - 带按钮的 Bootstrap 输入组文本区域

javascript - 显示/隐藏未嵌套的 Div

javascript - 如何根据 'ng-style' 计数分配 'ng-repeat' 指令值

html - 无法延长 Bootstrap 3 表单的大小

styles - 当悬停 <li> 与其同级元素重叠时,如何获得阴影?

html - 具有特定 HTML 标记的多行 Jlabel