Question

我正在学习CSS并试图让嵌套的导航菜单正常工作。我可以浮动主项目并将所有子元素堆叠在其下，但子菜单的相对位置不起作用。我打算将子菜单项相对于其父项移动到右侧。请让我知道我哪里出错了。

<!DOCTYPE html>
  <html>
   <head>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
     <style>
       *{
          margin:0;
          padding:0;
        }    
      h1{
        text-align: center;
        text-decoration: underline;
        margin-bottom: 10px;
      }
      li{
        list-style: none;
      }
      ul li a{
        text-decoration: none;
        display: block;
        width:100px;
        height: 25px;
        border: 1px solid green;
        text-align: center;
      }
      .main > li{
        float:left;
        position: relative;
      }

      .main > li > li {
        position: absolute;
        top:0px;
        left:10px;
      }
    </style>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <ul class="main">
      <li><a href="#">Menu 1</a>
        <ul class="sub1">
          <li><a href="#">Menu 1.1</a>
            <ul class="sub2">
              <li><a href="#">Menu 1.1.1</a></li>
              <li><a href="#">Menu 1.1.2</a></li>
              <li><a href="#">Menu 1.1.3</a></li>
              <li><a href="#">Menu 1.1.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 1.2</a></li>
          <li><a href="#">Menu 1.3</a></li>
          <li><a href="#">Menu 1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </body>
</html>

链接到Plnkr - Plnkr Link

Answer 1

主要问题是您的选择器：

.main > li > li

什么都不做。

此>表示“直系后代”。只有.main > li的直接后代是ul，因此选择器应显示为：

.main > li > ul

而且，一旦你有了工作，那么你可以隐藏ul（在正常情况下）并在悬停时显示它：

  .main > li > ul {
    display: none;
    position: absolute;
    top:27px;
    left:10px;
  }

  .main > li:hover ul {
    display: block;
  }

请参阅此revised plunker

修改
你的问题不是很清楚。我刚刚意识到你在中想要一个子子菜单的plunker中查看代码。

我已经修改过了plunker，所以这是正确的。基本上，您还需要设置子子菜单的位置/显示。修改后的css：

main > li > ul { display: none; position: absolute; top:27px; left:10px; } .main > li > ul > li > ul { position: absolute; top: 0; left: 100%; display: none; } .main > li:hover > ul, .main > li:hover > ul > li:hover > ul { display: block; }

而且，虽然我们在此，但您不需要float: left。 Float是具有非常具体和实用的东西 - 这不是其中之一。将其简单地更改为display: inline-block，并且您已设置，而没有使用float的其他后果。（注意：使用显示内联块，您可能会注意到导航项间隔约4px - 这是由于whitespace并且有一个简单的解决方案（提示：它是this answer）

嵌套导航菜单定位

1 个答案: