将级联的ul显示为嵌入式块不起作用

时间:2018-06-30 12:18:40

标签: html css css3

我想在列表项(列表2)中显示列表项(列表1),并且希望第一个列表的<li>元素内联显示,而每个第一个{ {1}}将在悬停时垂直显示。悬停在第一个主<li>上,然后第二个主<li>会显示在第一个主<li>的末尾的问题,这是意外的:

enter image description here

以下是问题的实时显示:  https://codepen.io/alafawzi/pen/PaVYyB

<li>
<li>

1 个答案:

答案 0 :(得分:1)

您需要在sub ul中添加绝对位置。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

ul li {
  display: inline-block;
  padding: 15px;
  position: relative;
}

ul li ul{
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;  
}

ul li:hover ul{
  display: block;
}
<body>
  <header>
    Html5 begins
  </header>

  <nav>
    <ul>
      <li><a href="#">div</a>
        <ul>
          <li>Link1.1</li>
          <li>Link1.2</li>
          <li>Link1.3</li>
        </ul>
      </li>
      <li><a href="#">head</a>
         <ul>
         <li>Link2.1</li>
          <li>Link2.2</li>
          <li>Link2.3</li>
        </ul>
    </ul>
  </nav>

</body>