CSS引导带MegaMenu

Question

我正试着做一个巨型下拉框，但它是不是带有一些bug。

问题：

子菜单内的-The li标签没有出现.

-Mouse Hover的子菜单和主菜单边框消失.

图像

鼠标悬停主菜单：

​

鼠标悬停子菜单：

​

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{
	border-bottom:1px solid #555;
}
#mainMenu .navbar-nav li:last-child,
#mainMenu .navbar-nav li:last-child a{
	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;
	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{
	background:none;
	border-bottom:3px solid #984793;
	color:#984793;
}

​

Answer 1

问题是这个css：

#mainMenu .navbar-nav li:last-child,
#mainMenu .navbar-nav li:last-child a{
    border-bottom:none !important; /* this removes bottom border for last-child */
}

如果您删除它，它将按预期工作。

这是一把小提琴，显示出修复方法