Question

我有一个超级菜单，固定宽度为780px，当我转换成百分比时，超级菜单中的数据会下降。

HTML CODE：

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

Answer 1

父类中有固定宽度（.sub_menu_wrap）添加100％而不是780

.sub_menu_wrap{
width: 100%;
max-width: 100%;
}

如何将固定的大型菜单转换为流畅的超级菜单

1 个答案: