ポップアップするサブメニューを取得できません

Question

私は、メインメニュー上にホバリングするときに.sub_menuを表示する方法を理解しようとしています。

私は.sub_menuを隠していることを知っていますが、サブメニュー<ul>を表示するには<li>をホバーするとどのようにコードするのですか？最初の<li>のホバーをターゲットに設定する必要がありますが、display: noneを変更してサブメニューを正しいようにしたいのですか？ 私はそれを行う方法を理解することはできません。

#navagation{ 
 
\t float:left; 
 
\t width:70%; 
 
\t height:100%;border: 1px solid green; 
 
\t margin:0; 
 
\t padding:0; 
 
\t } 
 
#btmenu{ 
 
    position:relative; 
 
    width:100%; 
 
\t list-style: none; 
 
\t margin:0; 
 
\t padding:0; 
 
\t border: 1px solid blue; 
 
\t height:62px;text-align:center; 
 

 
\t 
 
\t 
 

 
} 
 
ul#btmenu li{ \t 
 
padding:0; 
 
margin:0; 
 
display: inline; 
 
height:62px; 
 
width:200px; 
 

 
} 
 
#btmenu li > a{ \t height:62px; 
 
line-height:62px; 
 
margin-left:1%; 
 
margin-right:1%; 
 
border: 1px solid green; 
 
text-align:center; 
 
display:inline-block; 
 
text-decoration:none; 
 
font-weight:bold; 
 
font-size:15px; 
 
color:#000; 
 
padding-left:1%; 
 
padding-right:1%; 
 
text-transform:uppercase; 
 
vertical-align: middle; 
 
} 
 
#btmenu > li > a:hover{ 
 
background-color:#000; 
 
color:#FFF; \t 
 
} 
 
.sub_menu{ 
 
display:none; 
 
position:absolute; 
 
width:680px; 
 
background-color:#666; 
 
border: 1px solid red; 
 
list-style: none; 
 
margin:0; 
 
padding:0; 
 
} 
 
#btmenu .sub_menu li{ \t 
 
} 
 
.sub_menu li a{display:inline-block; 
 
background-color:#F00; 
 
height:100px; 
 
width:100px;margin:10px; 
 
text-decoration:none; 
 
color:#FFF; 
 
}

<div id="navagation"> 
 
<ul id="btmenu"> 
 

 

 

 
<li class="top_quote"><a href="services">services 
 
    <ul class="sub_menu"> 
 
    <li class="auto body repair"><a href="#">1</a></li> 
 
    <li class="rental & loaner"><a href="#">2</a></li> 
 
    <li class="hail damage repair"><a href="#">3</a></li> 
 
    <li class="towing"><a href="#">4</a></li> 
 
    <li class="glass repair"><a href="#">5</a></li> 
 
    </ul></a></li> 
 

 
<li class="top_quote"><a href="locations">locations</a></li> 
 
<li class="top_quote"><a href="partners">partners</a></li> 
 
<li class="top_quote"><a href="our work">our work</a></li> 
 
<li class="top_quote"><a href="contact">contact</a></li> 
 

 

 

 

 
</ul> 
 
</div><!--navagation-->

Answer 1

あなたはliを置くと、サブメニューが表示されますするには、この行を追加する必要があります。

#btmenu li:hover ul {display: block} 

See it here

Answer 2

あなたはサブメニューを持つべきではありません（これは、サブメニュー内のaタグに問題を引き起こす可能性があります）
あなただけ（兄弟として）タグの後にサブメニューを置くなら、あなたのようなli:hover

何かに基づいて行動することができます

#btmenu > li:hover .sub_menu{ 
    display: block; 
} 

スニペットと作業例：

#navagation{ 
 
\t float:left; 
 
\t width:70%; 
 
\t height:100%;border: 1px solid green; 
 
\t margin:0; 
 
\t padding:0; 
 
\t } 
 
#btmenu{ 
 
    position:relative; 
 
    width:100%; 
 
\t list-style: none; 
 
\t margin:0; 
 
\t padding:0; 
 
\t border: 1px solid blue; 
 
\t height:62px;text-align:center; 
 

 
\t 
 
\t 
 

 
} 
 
ul#btmenu li{ \t 
 
padding:0; 
 
margin:0; 
 
display: inline; 
 
height:62px; 
 
width:200px; 
 

 
} 
 
#btmenu li > a{ \t height:62px; 
 
line-height:62px; 
 
margin-left:1%; 
 
margin-right:1%; 
 
border: 1px solid green; 
 
text-align:center; 
 
display:inline-block; 
 
text-decoration:none; 
 
font-weight:bold; 
 
font-size:15px; 
 
color:#000; 
 
padding-left:1%; 
 
padding-right:1%; 
 
text-transform:uppercase; 
 
vertical-align: middle; 
 
} 
 
#btmenu > li > a:hover{ 
 
background-color:#000; 
 
color:#FFF; \t 
 
} 
 
.sub_menu{ 
 
display:none; 
 
position:absolute; 
 
width:680px; 
 
background-color:#666; 
 
border: 1px solid red; 
 
list-style: none; 
 
margin:0; 
 
padding:0; 
 
} 
 
#btmenu .sub_menu li{ \t 
 
} 
 
.sub_menu li a{display:inline-block; 
 
background-color:#F00; 
 
height:100px; 
 
width:100px;margin:10px; 
 
text-decoration:none; 
 
color:#FFF; 
 
} 
 

 
#btmenu > li:hover .sub_menu{ 
 
display: block; 
 
}

<div id="navagation"> 
 
<ul id="btmenu"> 
 

 

 

 
<li class="top_quote"> 
 
    <a href="services">services</a> 
 
    <ul class="sub_menu"> 
 
    <li class="auto body repair"><a href="#">1</a></li> 
 
    <li class="rental & loaner"><a href="#">2</a></li> 
 
    <li class="hail damage repair"><a href="#">3</a></li> 
 
    <li class="towing"><a href="#">4</a></li> 
 
    <li class="glass repair"><a href="#">5</a></li> 
 
    </ul> 
 
</li> 
 

 
<li class="top_quote"><a href="locations">locations</a></li> 
 
<li class="top_quote"><a href="partners">partners</a></li> 
 
<li class="top_quote"><a href="our work">our work</a></li> 
 
<li class="top_quote"><a href="contact">contact</a></li> 
 

 

 

 

 
</ul> 
 
</div><!--navagation-->