始终显示子菜单

Question

我也希望始终显示其子菜单。必须始终有一个活动的主菜单项，以便其子菜单可以显示在子菜单部分。如何根据我的规范自定义以下代码：

＆＃13;

＆＃13;

p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
}
#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}

＆＃13;

<nav id="menu">

  <ul class="parent-menu">

    <li><a href="#">Home & Kitchen</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Electronics</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>
    </li>

    <li><a href="#">Clothing</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>
    </li>

    <li><a href="#">Cars & Motorbikes</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Books</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Support</a>

      <ul>

        <li><a href="#">Contact Us</a>
        </li>

        <li><a href="#">Forum</a>
        </li>

        <li><a href="#">Deliveries</a>
        </li>

        <li><a href="#">T&C</a>
        </li>

      </ul>

    </li>

  </ul>

</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

执行以下操作：

1. 添加与.active相同的:hover课程。
2. 将class="active"添加到您想要显示的<li>中。

图书永远有效

＆＃13;
＆＃13;
p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li.active a,
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li.active > ul,
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
}
#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}
＆＃13;
<nav id="menu">
  <ul class="parent-menu">
    <li><a href="#">Home & Kitchen</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Electronics</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Clothing</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Cars & Motorbikes</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li class="active"><a href="#">Books</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Support</a>
      <ul>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Deliveries</a></li>
        <li><a href="#">T&C</a></li>
      </ul>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

此处汽车始终处于活动状态

＆＃13;
＆＃13;
p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li.active a,
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li.active > ul,
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
}
#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}
＆＃13;
<nav id="menu">
  <ul class="parent-menu">
    <li><a href="#">Home & Kitchen</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Electronics</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Clothing</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li class="active"><a href="#">Cars & Motorbikes</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Books</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Support</a>
      <ul>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Deliveries</a></li>
        <li><a href="#">T&C</a></li>
      </ul>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;