文章/答案/技术大牛

发布

问嵌套导航菜单定位
EN

Stack Overflow用户

提问于 2016-02-18 21:32:24

回答 1查看 36关注 0票数 0

我正在学习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

css

css-position

回答 1

Stack Overflow用户

发布于 2016-02-18 21:42:44

主要的问题是你的选择器：

.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

编辑

你的问题不是很清楚。我刚刚意识到你也想要一个子菜单。

我已经修改了柱塞，所以它是正确的。基本上，您还需要设置子菜单的位置/显示。修改后的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的其他后果。(注意:使用display inline-block，您可能会注意到导航项目的间距约为4px -这是由于whitespace，并且有一个简单的解决方案(提示:它是this answer)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35482873

复制

相似问题

问嵌套导航菜单定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套导航菜单定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套导航菜单定位
EN