Question

我试图弄清楚当鼠标悬停在主菜单上时如何显示.sub_menu。

我知道您隐藏了.sub_menu，但是当您将鼠标悬停在<li>上以显示子菜单<ul>时，您如何编码？您必须将鼠标悬停在第一个<li>上，然后将display: none更改为您希望子菜单看起来正确吗？我无法弄清楚如何去做。

＆＃13;

#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;
}

＆＃13;

<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-->

＆＃13;

Answer 1

您需要添加此行，以便在您悬停li时显示子菜单：

#btmenu li:hover ul {display: block}

See it here

Answer 2

您不应该在标签内有子菜单（这可能会导致子菜单中的标签出现问题）
如果您将子菜单放在标签之后（作为兄弟），那么您可以对li:hover

采取行动

类似的东西：

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

您的代码段的工作示例：

#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;
}

#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-->

无法弹出子菜单

2 个答案: