我有一个巨型菜单，当我将其转换为百分比时，巨型菜单的宽度固定为780px。
HTML代码：
<ul class="horizontal_list main_menu clearfix">
<li class="current relative f_xs_none m_xs_bottom_5"><a href="category_grid.html" class="tr_delay_hover color_light tt_uppercase"><b>Ninos Felices</b></a>
<div class="sub_menu_wrap top_arrow d_xs_none tr_all_hover clearfix r_corners w_xs_auto col-md-12">
<div class="f_left f_xs_none col-md-3">
<b class="color_dark m_left_20 m_bottom_5 m_top_5 d_inline_b">Dresses</b>
<ul class="sub_menu first">
<li><a class="color_dark tr_delay_hover" href="#">Evening Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Casual Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Party Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Maxi Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Midi Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Strapless Dresses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Day Dresses</a></li>
</ul>
</div>
<div class="f_left m_left_10 m_xs_left_0 f_xs_none col-md-3">
<b class="color_dark m_left_20 m_bottom_5 m_top_5 d_inline_b">Accessories</b>
<ul class="sub_menu">
<li><a class="color_dark tr_delay_hover" href="#">Bags and Purces</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Belts</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Scarves</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Gloves</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Jewellery</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Sunglasses</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Hair Accessories</a></li>
</ul>
</div>
<div class="f_left m_left_10 m_xs_left_0 f_xs_none col-md-3">
<b class="color_dark m_left_20 m_bottom_5 m_top_5 d_inline_b">Tops</b>
<ul class="sub_menu">
<li><a class="color_dark tr_delay_hover" href="#">Evening Tops</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Long Sleeved</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Short Sleeved</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Sleeveless</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Tanks</a></li>
<li><a class="color_dark tr_delay_hover" href="#">Tunics</a></li>
</ul>
</div>
<img src="images/woman_image_1.jpg" class="d_sm_none f_right m_bottom_10 col-md-3" alt="">
</div>
</li>
<li class="relative f_xs_none m_xs_bottom_5"><a href="#" class="tr_delay_hover color_light tt_uppercase"><b>On-the-go</b></a>
</li>
</ul>
我在上面使用了引导程序列，但它根本没有用。
CSS代码：
.sub_menu_wrap{
position:absolute;
left:0;
width:780px;
background:#fff;
padding:10px 10px 0 0;
border-top-width:3px;
border-top-style:solid;
margin-top:10px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-o-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-ms-box-shadow:0 1px 2px rgba(0,0,0,0.15);
box-shadow:0 1px 2px rgba(0,0,0,0.15);
-webkit-transform:translateY(35px);
-moz-transform:translateY(35px);
-o-transform:translateY(35px);
-ms-transform:translateY(35px);
transform:translateY(35px);
opacity:0;
visibility:hidden;
}
.sub_menu_wrap:after{
content:"";
width:100%;
height:10px;
display: block;
position: absolute;
left:0;
top:-13px;
}
.sub_menu_wrap:before{
right:auto;
left:16px;
}
.sub_menu_wrap.type_2{
width:auto;
padding:0;
}
.sub_menu,.caption,.product_item .photoframe figcaption > *,.product_item .photoframe img,
.photoframe img,.blog_carousel *,blockquote,.banner_type_2 *,#footer *,
.banner *,#go_to_top,.social_widgets *,.main_menu > li > a,.qv_carousel_wrap *{
-webkit-backface-visibility:hidden;
}
.sub_menu li a{
display:block;
padding:7.7px 20px;
white-space:pre;
}
.sub_menu_wrap .sub_menu.first > li:last-child > a{
-webkit-border-radius:0 0 0 4px;
-moz-border-radius:0 0 0 4px;
border-radius:0 0 0 4px;
}
.sub_menu_wrap.type_2 .sub_menu > li:last-child > a{
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}
最佳答案
父类中的宽度是固定的（.sub_menu_wrap），而不是780加上100％
.sub_menu_wrap{
width: 100%;
max-width: 100%;
}