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

Css子菜单全宽，两列无效

1 个答案: