html - 无法弹出子菜单

Question

我正在尝试弄清楚如何获得 .sub_menu悬停在主菜单上时显示。

我知道你隐藏了.sub_menu但是将鼠标悬停在 <li> 上时如何编码？显示子菜单 <ul> ？您必须将悬停作为第一个 <li> 的目标但随后更改 display: none但是您希望子菜单看起来像对吗？ 我不知道该怎么做。

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

	
	

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

}
#btmenu li > a{	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;	
}
.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{	
}
.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