Question

我试图将代码保持在最小值，因此我创建了一个子菜单，该子菜单将根据.sub_menu中的LI数量进行扩展和缩小，例如，如果只有5个Li或者10它将环绕它们，即使它没有宽度属性，也会在所有边上留下5px的边距。然而，当我将它插入主导航时，它会停止工作。
如果不管有多少个子菜单，我怎样才能使子菜单包裹在LI周围？

<!DOCTYPE html>
<style>
/* CSS Document */
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#f0f0f0;
}
.sub_menu{
position:absolute;
display:inline-block;/*no need for height or width here*/
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
}
.sub_menu li{
margin:10px;
display:inline-block;
}
.sub_menu li a{
display:inline-block;
background-color:#F00;
height:100px;
width:100px;
text-decoration:none;
color:#FFF;
}
</style>
<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>

这里当sub_menu插入菜单时它停止工作

＆＃13;

#navigation{
float:left;
width:70%;
height:100%;
margin:0;
padding:0;
}
#btmenu{
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
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%;
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;
}
#btmenu .sub_menu li{	
}
.sub_menu li a{display:block;
background-color:#F00;
height:100px;
width:100px;margin:10px;
text-decoration:none;
color:#FFF;
}
#btmenu > li:hover .sub_menu{
display:block;/*no need for height or width using inline block intill i insert submenu into main menu*/
position:absolute;
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
white-space:nowrap;
}

＆＃13;

<div id="navigation">
<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>
 <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>
    <li class="glass repair"><a href="#">6</a></li>
    <li class="glass repair"><a href="#">7</a></li>
  </ul></li>
<li class="top_quote"><a href="partners">partners</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>
    <li class="glass repair"><a href="#">6</a></li>
    <li class="glass repair"><a href="#">7</a></li>
  </ul></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><!--navigation--

＆＃13;

Answer 1

我认为你的问题（你监督的是），你的子菜单是从你的btmenu li继承的。

我已经创建了一个解决问题的jsfiddle（我想，这就是你想要的）：https://jsfiddle.net/jn6xfx4c/

所需的代码：

ul#btmenu .sub_menu li {
    display: inline-block;
    height: auto;
}

Answer 2

您使用的li的数量比导航所用的容器的宽度要多，因此您需要从css中的white-space:nowrap;中删除#btmenu > li:hover .sub_menu，否则如果您需要它们在同一行，这样你就可以通过添加overflow:auto;来保持水平滚动，同时保持white-space:nowrap;

如何在没有指定宽度的情况下让子菜单水平换行

2 个答案: