我尝试用css创建一个大型菜单。实际上它在我的导航之外很好用。我用3 col设计我的导航栏。在中间我放下拉菜单,但子菜单扩展到col-lg-6但我想用它扩展它。
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 20px;
font-family: sans-serif;
font-size: 2em;
text-decoration: none;
color: grey;
}
a:hover {
background: #efefef;
}
li .sub {
display: none;
width: 100%;
height: auto;
position: absolute;
left: 0;
background:#e5e5e5;
}
li:hover .sub {
display: block;
}

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-8 logo">
LOGO
</div>
<div class="col-lg-6 visible-lg hidden-xs">
<ul>
<li>
<a href="#">Menu 1</a>
<div class="sub">
<div style="width:35%; height:200px; float:left;">
LOGO
</div>
<div style="width:65%; height:200px; float:left;">
SUB MENU WITH SOME CONTENT
</div>
<div style="clear:both;"></div>
</div>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 hidden-xs">
<form id="search" name="search" method="get" action="search.php">
<input class="search" type="text" name="tag" id="tag" placeholder="Arama Yap" />
</form>
</div>
</div>
</div>
&#13;
答案 0 :(得分:1)
希望以下内容对您有所帮助:
li .sub {
display: none;
width: 100%;
height: auto;
position: fixed; /* changed to fixed from absolute */
left: 0;
right: 0; /* added to occupy the full width*/
background:#e5e5e5;
}
您可以在此处查看演示:http://www.bootply.com/xnqkM3x4wd