Css子菜单全宽，两列不起作用

Question

我四处寻找来解决这个问题，并篡改代码以使其正常工作，但没有任何发现。我希望子菜单是满的，宽度为两列。

（我已经粘贴了导航的完整代码，它可能没有正确对齐，因为我在粘贴代码时使用cntrl+k，它向左对齐。）这是HTML:

   /* start navigation */
   .navbar-default ul { margin:0; }
     .navbar-default li ul { display:none; }
     .navbar-default li:hover ul 
     {  width:1200px!important; /* or: width:1200px!important;*/
     -moz-border-radius-topleft: 10px;
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 10px;
     -moz-border-radius-bottomleft: 10px;
     -webkit-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px;
      background-color: #ffffff;
      float: right; }
      }

}
.navbar-default ul { margin:0; }
.navbar-default li ul { display:none; }
.navbar-default li:hover ul { display:block;   
width:200px;}
.navbar-default li ul li {
 display:block;
  padding:0;
 }

.navbar-default
 {
background: #ffffff;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand
{
color: #0066cc;
height: 80px;
line-height: 60px;
padding-left: 0x;
width:250px;
text-align:left;

}
.navbar-default .navbar-brand h3
{
font-weight: bold;

}
.navbar-default .navbar-nav li a
{
color: #ff0000;
font-weight: bold;
height: 20px;
line-height: 0px;
margin-right: -20px;

}
.navbar-default .navbar-nav li a:hover
{
color: #0066cc;
ul{
list-style:none;
padding:0;
}     
}
.navbar-default .navbar-nav > li > a:focus
 {
 color: #0066cc;
 }
.navbar-default .navbar-toggle
{
  margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar
 {
 background-color: #66AF33;
 color: #FFFFFF;
 }
.navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
 color: #0066cc;
  background-color: transparent;
 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: ffffff; }
 .navbar-default .navbar-toggle:hover .icon-bar 

Answer 1

HTML:

<!-- start navigation -->

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand"><h3>Virtual School</h3></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#about" class="smoothScroll">ABOUT</a></li>
                        <li><a href="#team" class="smoothScroll">LESSONS</a>
                        <ul> <li><a href="#service" class="smoothScroll">CLASSES</a></li></ul>
                        <li><a href="#service" class="smoothScroll">SERVICES</a></li>
                        <li><a href="#work" class="smoothScroll">PORTFOLIO</a></li>
                        <li><a href="#pricing" class="smoothScroll">PACKAGES</a></li>
                        <li><a href="#contact" class="smoothScroll">CONTACT</a></li>
                        <li><a href="#" class="smoothScroll">CONTROL PANEL</a>
                        <ul>  <li><a href="#" class="smoothScroll">LOGIN</a></li> <li><a href="#" class="smoothScroll">SIGN UP</a></li><li><a href="#" class="smoothScroll">SEARCH</a></li> <li><a href="#" class="smoothScroll">LOGIN</a></li> <li><a href="#" class="smoothScroll">SIGN UP</a></li><li><a href="#" class="smoothScroll">SEARCH</a></li>
                            </ul>
                </div>
            </div>              
        </div>
    </nav>
    <!-- end navigation -->