jquery - 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 -->