Question

我正在使用三个级别的子导航元素创建导航。

当你到达第三级时它的工作正常，但它只显示一个子类别，我希望它显示多个子类别。

我不确定为什么它没有显示出来并且必须是我设计和开发它的方式的问题。

我在这里添加了一个JS小提琴https://jsfiddle.net/e52u02bL/4/

HTML

<body>
<div class="nav">
<ul class="nav-primary test">
    <li><a href="#">Household</a>
        <ul class="test">
            <li><a href="#">Living Room</a></li>
            <li><a href="#">Bedroom</a></li>
            <li><a href="#">Living Room</a>
                <ul class="thrdLvl">
                    <li><h4>Heading</h4></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">HTML</a></li>
                </ul>
                <ul class="thrdLvl">
                    <li><h4>Heading</h4></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">HTML</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Hardware</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">User Experience</a></li>
        </ul>
    </li>
    <li><a href="#">Wedding List</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
</ul>
</div>

</body>


CSS

.nav {
    width: 100%;
    background: #FFF;
    padding: 0;
    margin: 0;
    position:relative;
  }

  .nav ul {
    background: #FFF;
    list-style:none;
    padding:0 20px;
    margin: 0;

  }

  ul.test li {
    display: inline-block;
  }

  .nav ul li a {
    color:#333333;
    display:block;
    padding:0px 40px;
    text-decoration:none;
    float: left;
    height: 60px;
    line-height: 60px;
  }

  .nav ul li:hover {
    background: #3B95D3;
  }


  .nav ul li:hover > a{
    color:#FFFFFF;
  }

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

  .nav ul ul {
    background: #FFF;
    padding:0;
    display:none;
     width: 100%;
    position: absolute;
    top: 60px;
    left: 0px;
  }

  .nav ul ul ul {
    background: #3B95D3;
    display:none;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0px;
  }

  .nav ul > li > ul > li > ul > li {
    background-color:red;
    padding-top:;
    width: 33.33333%;
  }


  div > h4 {color:#FFF; padding-left: 38px;}

  ul.thrdLvl > li{
      display:block;
      max-width:100px;
  }

  @media screen and (max-width: 480px) { 
    .nav{
        width: 100%;
        float: none;
        padding: 0 2em;
    }

    .nav ul {
        width: 100%;
    }

    .nav ul li {
        width: 100%;
    }

  }

非常感谢，

罗伯特。

Answer 1

我认为这个问题是绝对定位（第三层是彼此重叠）。在绝对定位中，没有元素浮动。因此，您通常必须指定一个偏移量以达到所需的效果。也许这个例子在这里：

https://jsfiddle.net/domslee/e52u02bL/21/

CSS：

.nav ul ul {
  left: 0px; /*Removing this fixes aligning issue*/
}
.nav ul ul ul {
  background: #3B95D3;
  display:none;
  width: 200px;
  position:absolute;
  top: 60px;
  left: 0px;
}

.nav ul ul ul:nth-child(2) { /*Using n-th child to specify offset for second child*/
  left: 200px;
}

子导航下拉问题

1 个答案: