在垂直下拉列表中添加更深层次的菜单

Question

我正在尝试更改现有的 html 下拉菜单以在其他下拉菜单中添加更多下拉菜单。我的问题是我似乎无法使下拉菜单显示为 2 级深度的悬停下拉菜单。我忘记在此代码中添加什么 CSS 语法？

nav {
 /* Repeating background image */
 background: #d3d3d3;
 width:300px;
 margin:20px;
}
nav ul {
 /* Removes bullet points */
 list-style:none;
 margin:0;
 padding:0;
 
}
nav ul li {
 /* Any child positioned absolutely will be positioned relative to this */
 position:relative;
}
nav a {
 color:#000000;
 padding:12px 0px;
 /* Fill all available horizontal space */
 display:block;
 /* Remove underline */
 text-decoration:none;
 /* 
 New CSS3 animations:
 apply transition to background property, taking 1s to change it 
 */
 transition:background 1s;
 -moz-transition:background 1s;
 -webkit-transition:background 1s;
 -o-transition:background 1s;
 font-family:tahoma;
 font-size:13px;
 text-transform:uppercase;
 padding-left:20px;
}
nav a:hover {
 /* 
 RGBA background for transparancy: 
 last number(0.05) is the transparency 
 */
 background: RGBA(255,255,255,0.05);
 color:#fff;
 
}
nav a:hover span {
 background: #7d2c41;
 transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
}
nav ul li:hover ul {
 display:block;
}
nav ul ul {
 position:absolute;
 left:300px;
 top:0;
 border-top:1px solid #e9e9e9;
 display:none;
}
nav ul ul li {
 width:200px;
 background:#0000FF;
 border:1px solid #e9e9e9;
 border-top:0;
}
nav ul ul li a {
 color: #0000FF;
 font-size:12px;
 text-transform:none;
}
nav ul ul li a:hover {
 color:#0000FF;
}
nav ul ul ul li {
 width:200px;
 background:#0000FF;
 border:1px solid #e9e9e9;
 border-top:0;
}
nav ul ul ul li a {
 color: #0000FF;
 font-size:12px;
 text-transform:none;
}
nav ul ul ul li a:hover {
 color:#0000FF;
}
nav ul ul ul ul li {
 width:200px;
 background:#0000FF;
 border:1px solid #e9e9e9;
 border-top:0;
}
nav ul ul ul ul li a {
 color: #0000FF;
 font-size:12px;
 text-transform:none;
}
nav ul ul ul ul li a:hover {
 color:#0000FF;
}
nav span {
 width:12px;
 height:12px;
 background:#fff;
 display:inline-block;
 float:left;
 margin-top:3px;
 margin-right:20px;
 position:relative;
 transition:all 0.5s;
 -moz-transition:all 0.5s;
 -o-transition:all 0.5s;
 -webkit-transition:all 0.5s;
}
nav span:before {
 content:"";
 width:12px;
 height:2px;
 background:#d3d3d3;
 position:absolute;
 left:0px;
 top:5px;
}
nav span:after {
 content:"";
 width:2px;
 height:12px;
 background:#d3d3d3;
 position:absolute;
 left:5px;
 position:top;
}

<nav>
 <ul>
  <li class="current"><a href="#"><span></span> S </a></li>
  <li> <a href="#"><span></span>R </a>
   <ul>
    <li> <a href="#">H</a></li>
    <li> <a href="#">A </a></li>
    <li> <a href="#">D </a></li>
    
   </ul>
  </li>
  <li> <a href="#"><span></span>Operations Support Compliance </a>
<ul>
    <li> <a href="#">HC</a></li>
    <li> <a href="#">a </a></li>
    <li> <a href="#">D </a>
<ul>
<li> <a href="#">H</a></li>
    <li> <a href="#">A </a></li>
    <li> <a href="#">D </a></li>
</ul>
</li>
    
   </ul>
</li>
  <li> <a href="#"><span></span>P </a></li>
  <li> <a href="#"><span></span>O </a></li>
  
 </ul>
</nav>

Answer 1

使用子选择器 > 。

现在，nav ul li:hover ul针对任何ul，该是悬停li的后代，该ul是任何nav的后代。

另一种表达方式：如果您将li悬停在nav内的ul内，它将li内的每个ul设置为display: block;。

使用子选择器>将帮助您控制显示哪些下拉列表，哪些不显示。防止原始选择器的"深远"功能。

改变

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

自

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

演示 JSFiddle。