无序列表不会向下移动＆＃39;隐藏<li>时显示</li>

Question

我使用无序列表创建了一个菜单。但是，当我想要显示一个我隐藏的子菜单时，他们只是在隐藏的列表项下面。

我需要的是隐藏列表项目使用时显示：悬停我需要它来按下＆＃39;其他清单项目。

这是代码

＆＃13;

＆＃13;

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation ul li {
  width: 300px;
  height: 40px;
  display: block;
  background-color: blue;
}
#navigation li ul li {
  background-color: purple;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
  display: none;
}
#navigation ul li:hover ul li {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #navigation ul {
  display: block;
}

＆＃13;

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>
      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>
        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>
        </li>
        <li><a href='#'>Library Shelving </a>
        </li>
        <li><a href='#'>Seating</a>
        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>
        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Specials</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

三江源。

Answer 1

这里有一些问题。最大的问题是您将height: 40px添加到#navigation ul li，这就是为什么您的subnav没有将其他li推下来的原因。它包含在40px框内，只是突然出现。你真的应该在你的class添加一个ul，因为当你一定不想要它们时，某些样式会被继承。此外，您需要在ul悬停上显示子空间而不是li，否则您将有一个很大的差距：

#navigation ul.nav { //added class name to ul
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}

#navigation ul.nav li {
  width: 300px;
  display: block;
  background-color: blue;
}

#navigation ul.nav li ul.subnav{ //added class to subnav
  display: none;
  margin: 0;
  padding: 0;
}

#navigation ul.nav li ul.subnav li {
  background-color: purple;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
}

#navigation ul.nav li:hover ul.subnav {
  display: block;
}

.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #navigation ul.nav {
  display: block;
}

FIDDLE

Answer 2

大多数样式都被覆盖，因为您使用ul li进行样式设置，所以我使用了>选择器，它只针对孩子而不是子孩子

＆＃13;

＆＃13;

ul {
  margin: 0;
  padding: 0;
}
a {
  color: white;
  display: inline-block;
}
#navigation > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation > ul > li {
  width: 300px;
  height: 40px;
  background-color: blue;
  display: inline-block;
}
#navigation li ul {
  width: 300px;
  display: none;
}
#navigation li ul li {
  height: 40px;
  background-color: purple;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
}
#navigation ul li:hover ul {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + #navigation > ul {
  display: block;
}

＆＃13;

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>

      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>

        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>

        </li>
        <li><a href='#'>Library Shelving </a>

        </li>
        <li><a href='#'>Seating</a>

        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>

        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>

    </li>
    <li><a href='#'>Contact</a>

    </li>
    <li><a href='#'>About</a>

    </li>
    <li><a href='#'>Specials</a>

    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要将display: inline添加到#navigation ul li。

工作代码段：

＆＃13;

＆＃13;

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation ul li {
  width: 300px;
  height: 40px;
  display: inline;
  background-color: blue;
}
#navigation ul li ul li {
  background-color: white;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
  display: none;
}
#navigation ul li:hover ul li {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #navigation ul {
  display: block;
}

＆＃13;

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>
      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>
        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>
        </li>
        <li><a href='#'>Library Shelving </a>
        </li>
        <li><a href='#'>Seating</a>
        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>
        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Specials</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;