0
我試圖做megamenu下拉，但它是否有一些錯誤。CSS Bootstrap MegaMenu
問題：
子菜單內-The李標籤沒有出現。
鼠標懸停子菜單和主菜單邊框消失。
圖片
鼠標懸停時主菜單： 
鼠標懸停子菜單： 
HTML：
<div class="collapse navbar-collapse" id="mainMenu">
<!-- Main navigation -->
<ul class="nav navbar-nav pull-right">
<li class="primary <?php if($page == 'main'){ echo 'active'; } ?>">
<a href="./?page=main" class="firstLevel last" >Home</a>
</li>
<li class="primary <?php if($page == 'about'){ echo 'active'; } ?>">
<a href="./?page=about" class="firstLevel last" >About us</a>
</li>
<li class="primary">
<a href="#" class="drop">Features</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns align_right"><!-- Begin 4 columns container -->
<div class="col-md-4">
<h3>Technical</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>Design</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>Software</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li>
<li class="primary <?php if($page == 'portfolio'){ echo 'active'; } ?>"><a href="./?page=portfolio" class="firstLevel last">Portfolio</a></li>
<li class="primary <?php if($page == ''){ echo 'active'; } ?>"><a href="" class="firstLevel last">Downloads</a></li>
</ul>
<!-- End main navigation -->
</div>
CSS
#mainMenu .navbar-nav li{
\t border-bottom:1px solid #555;
}
#mainMenu .navbar-nav li:last-child,
#mainMenu .navbar-nav li:last-child a{
\t border-bottom:none !important;
}
#mainMenu li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#mainMenu li a {
display:block;
outline:0;
text-decoration:none;
}
#mainMenu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
/* Drop Down */
.dropdown_4columns{
float:left;
position:absolute;
display:none; /* Hides the drop down */
text-align:left;
border-top:none;
background-color:#eee;
}
.dropdown_4columns {width: 560px;}
#mainMenu li:hover .dropdown_4columns{
display:block;
top:auto;
}
#mainMenu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#mainMenu p, #mainMenu h2, #mainMenu h3, #mainMenu ul li {
line-height:21px;
font-size:12px;
text-align:left;
}
#mainMenu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#mainMenu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#mainMenu p {
line-height:18px;
margin:0 0 10px 0;
}
#mainMenu li:hover div a {
font-size:12px;
color:#015b86;
}
#mainMenu li:hover div a:hover {
color:#029feb;
}
#mainMenu li ul {
list-style:none;
padding:0;
margin:0 0 0px 0;
}
#mainMenu li ul li {
position:relative;
padding:0;
margin:0;
float:none;
text-align:left;
\t display:block;
}
#mainMenu li ul li:hover {
background:none;
padding:0;
margin:0;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
\t background:none;
\t border-bottom:3px solid #984793;
\t color:#984793;
}
試添加.clearfix到UL – Chandrakant
沒有工作，我添加到菜單中的所有UL @Chandrakant –
嗯可以請您創建jsfiddle.net？ – Chandrakant