詳細なメニューを垂直ドロップダウンリストに追加

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

子セレクタ>を使用してください。

今ANY navの子孫をされている任意のulの子孫である推移liの子孫であるnav ul li:hover ulターゲットANY ul。

フレーズ、それをする別の方法：あなたがnavの内側ulの内部liを置くならば、それはそれの内部EVERY ulを設定しますがdisplay: block;にliを推移しました。

子セレクタ>を使用すると、どのドロップダウンが表示されるかを制御するのに役立ちます。 の「先に届いた」の元のセレクターの機能を妨げる。

変更

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

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

にデモ JSFiddle。