Question

<ul id="login">
    <li><a href="#">User></a></li>
    <li><a href="#">Logout></a></li>
</ul>

我确实让我的菜单和子菜单正常工作。但最后一项来自部分视图并未显示，因为此行

/* hide the second level menu */
    .menu ul {
           display: none;

我尝试使用:not选择器，然后以错误的格式显示，第一个子菜单停止工作。

.menu ul:not(#login)

在此示例中，所有四个<LI>元素应具有相同的格式，并且第一个元素显示子菜单。

还尝试为第二个UL创建一个不同的类并忽略我。

＆＃13;

body {
  background: black;
}

.menu {
  display: block;
}

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 11px;
  display: block;
  color: #ffffff;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a {
  color: #ffffff;
  background: #9CA3DA;
}

/* hide the second level menu */
.menu ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  top: 43px;
  left: 0px;
  background: #ffffff;
}

/* display second level menu on hover */
.menu li:hover > ul {
  display: block;
}

.menu ul li {
  display: block;
  float: none;
  background: black;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  border-left: 3px solid #ffffff;
  background: #ffffff;
}

.menu ul li a:hover, .menu ul li:hover > a {
  background: #f0f0f0;
  border-left: 3px solid #9CA3DA;
  color: #797979;
}

＆＃13;

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li>
    <li>            
        <ul id="login">
            <li><a href="#">User</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </li>
</ul>
</nav>

＆＃13;

Answer 1

以下是代码：

<nav>
  <ul class="menu">
    <li>
      <a href="#"><i class="icon-home"></i>HOME</a>
      <ul class="sub-menu">
        <li><a href="#">Sub-Menu 1</a></li>
        <li><a href="#">Sub-Menu 2</a></li>
        <li><a href="#">Sub-Menu 3</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li>
    <li id="user"><a href="#">USER</a></li>
    <li id="logout"><a href="#">LOGOUT</a></li>
  </ul>
</nav>

应该这样做！

Answer 2

你能否解释一下为什么你没有将User和Logout放在Home和About的同一级别：

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-user"></i>ABOUT</a>
     </li>
     <li><a href="#">User</a></li>
     <li><a href="#">Logout</a></li>
 </ul>
</nav>

它应该有用！

修改

通过以下css修改，您的菜单应该可以正常工作。

.menu ul.sub-menu li a { ... } .menu ul.sub-menu li a:hover, .menu ul.sub-menu li:hover > a { ... } #login {padding: 0; text-transform: uppercase;}

codepen

Answer 3

您已将ABOUT链接单独放入列表项中。这是正确的HTML：

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-user"></i>ABOUT</a>
        <ul id="login">
            <li><a href="#">User</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </li>
 </ul>
</nav>

如何使内部元素忽略该样式

3 个答案: