菜单大小调整问题

Question

我的大型菜单大小有问题。桌面菜单有一个悬停下拉菜单。巨型菜单将分为5列和4列。我不能让菜单在列周围正确调整大小。目前它的设置接近我对5列菜单的喜好，但是有一些文本换行和id而不是菜单大小适当。四列有太多的空白区域。我尝试了一些事情，例如切换宽度以达到最大宽度，但这并没有解决问题。我真的很想让超级菜单更具响应性。

Codepen：https://codepen.io/iamgonge/pen/QpOgZB

桌面导航css：

/* Main Nav syle */

nav {
    position: relative;
}
ul.main-nav {
    list-style-type: none;
    padding: 0px;
    font-size: 0px;
    max-width: 1000px;
    margin: 0 auto;
}
ul.main-nav h2 {
    font-size: .9em;
    font-weight: 300;
}
ul.main-nav > li {
    display: inline-block;
    padding: 0;
}
ul.main-nav > li > a {
    display: block;
    padding: 20px 15px;
    position: relative;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    box-sizing: border-box;
}
ul.main-nav > li:hover {
    background-color: #f9f9f9;
}
ul.main-nav > li:hover > a {
    color: #333;
    font-weight: 400;
}
ul.main-nav > li ul.sub-menu-lists {
    margin: 0px;
    padding: 1px;
    list-style-type: none;
    display: block;
}
ul.main-nav > li ul.sub-menu-lists > li {
    padding: 0 0px;
    margin-top: 2px;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
    font-size: 14px;

}
.sub-menu-head {
    margin: 10px 0;
    border-bottom: 1px solid #4F96BA;
    width: 100%;
}

/*Media Queries*/

@media only screen and (max-width: 768px) {

  #top-logo {
        display: block;
    max-width: 50%;
    margin: 3px auto;
}
  .collapse.in {   
    min-height: 150px;
    background-color:#4F96BA;
    verflow-y:visible;
}
    .sub-menu-head {
        color: #fff;
    }
    nav {
        background-color: transparent;
    }
    ul.main-nav > li > a:after {
        display: none;
    }
    ul.main-nav > li:first-child {
        border-radius: 0px;
    }
    ul.main-nav > li {
        display: block;
        border-bottom: 1px solid #444;
    }
    ul.main-nav > li > a {
        font-weight: 600;
    }
    ul.main-nav > li ul.sub-menu-lists > li a {
        color: #4F96BA;
        ;
        font-size: 14px;
    }
    .sub-menu-head {
        font-size: 16px;
    }
    ul.main-nav > li:hover {
        background-color: transparent;
    }
    ul.main-nav > li:hover > a {

        text-decoration: none;
        font-weight: 600;
    }
    .sub-menu-block {
        padding: 0 30px;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #000;
    }
    #big {
        display: none;
    }

}
/*end query*/

@media only screen and (min-width: 769px) {

    #top-logo, #searchie {
        display: none;
    }


    ul.main-nav {
        display: block;
        position: relative;
    }
    .sub-menu-block {
        padding: 15px;
    }
    /* Sub Menu */

    ul.main-nav > li > div.sub-menu-block {
        visibility: hidden;
        background-color: #f9f9f9;
        position: absolute;
        margin-top: 0px;
        width: 100%;
        color: #333;
        left: 0;
        box-sizing: border-box;
        z-index: 3;
        font-size: 16px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        opacity: 0;
        /*CSS animation applied for sub menu : Slide from Top */

        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
        -webkit-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
    }
    ul.main-nav > li:hover > div.sub-menu-block {
        background-color: #f9f9f9;
        visibility: visible;
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
    ul.main-nav > li > div.sub-menu-block > * {
        -webkit-transition-property: opacity;
        -moz-transition-property: opacity;
        -o-transition-property: opacity;
        transition-property: opacity;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
        -o-transition-duration: 0.4s;
        transition-duration: 0.4s;
        opacity: 0;
    }
    ul.main-nav > li:hover > div.sub-menu-block > * {
        opacity: 1;
    }
    .sub-menu-head {
        font-size: 20px;
    }
    /* List Separator: Outer Border */

    header.dark ul.main-nav > li > a {
        border-right: 1px solid #bbb;
    }
    header.mega ul.main-nav > li > a {
        border-right: 1px solid #666;
    }
    /* List Separator: Inner Border */

    ul.main-nav > li > a:after {
        content: '';
        width: 1px;
        height: 62px;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;
    }
    header.dark ul.main-nav > li > a:after {
        background-color: #777;
    }
    header.mega ul.main-nav > li > a:after {
        background-color: #999;
    }
    /* Drop Down/Up Arrow for Mega Menu */

    ul.main-nav > li > a.mega-menu > span {
        display: block;
        vertical-align: middle;
    }
    ul.main-nav > li > a.mega-menu > span:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        content: '';
        background-color: transparent;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }
    ul.main-nav > li:hover > a.mega-menu span:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 0px solid transparent;
        border-bottom: 5px solid #666;
    }
    .banners-area {
        border-top: 1px solid #ccc;
    }

    #little {
        display: none;
    }
}
/*end query*/
/**************Additions****************/
/* 5 Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

HTML：

<div id="big">
   <div class="navbar navbar-default navbar-static-top navbar-main affix-top" data-spy="affix" data-offset-top="50" role="navigation" >
      <div class="dark">
         <ul class="main-nav">
            <li class="top-level-link">
               <a class="mega-menu"><span>SOFTWARE</span></a>
               <div class="sub-menu-block" id="five-block">
                  <div class="row">
                     <div class="col-md-15 col-sm-6">
                        <h2 class="sub-menu-head">Microsoft Office</h2>
                        <ul class="sub-menu-lists">
                           <li class="hover_drop_down">
                              <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                              <ul class="dropdown-menu" role="menu">
                                 <li><a href="#">Office 2016 Home & Business</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Microsoft Office 365</a> </li>
                        </ul>
                     </div>
                     <div class="col-md-15 col-sm-6">
                        <h2 class="sub-menu-head">Windows</h2>
                        <ul class="sub-menu-lists">
                           <li><a>Microsoft Windows 10 Pro</a></li>
                        </ul>
                     </div>
                     <div class="col-md-15 col-sm-6">
                        <h2 class="sub-menu-head">SQL Server</h2>
                        <ul class="sub-menu-lists">
                           <li><a>Microsoft SQL Server 2016<span class="caret"></span></a></li>
                        </ul>
                     </div>
                     <div class="col-md-15 col-sm-6">
                        <h2 class="sub-menu-head">Windows Server</h2>
                        <ul class="sub-menu-lists">
                           <li><a>Windows Server 2003 R2<span class="caret"></span></a></li>
                        </ul>
                     </div>
                     <div class="col-md-15  col-sm-6">
                        <h2 class="sub-menu-head">Remote Desktop Services</h2>
                        <ul class="sub-menu-lists">
                           <li><a>Remote Desktop Services 2016<span class="caret"></span></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </li>
            <li class="top-level-link">
               <a class="mega-menu"><span>ELECTRONICS</span></a>
               <div class="sub-menu-block">
                  <div class="row ">
                     <div class="col-md-3 col-sm-6" >
                        <h2 class="sub-menu-head">Software Resources</h2>
                        <ul class="sub-menu-lists" >
                           <li><a>Software Resources</a></li>
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-6" >
                        <h2 class="sub-menu-head">Software Resources</h2>
                        <ul class="sub-menu-lists" >
                           <li><a>Software Resources</a></li>
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-6" >
                        <h2 class="sub-menu-head">Software Resources</h2>
                        <ul class="sub-menu-lists" >
                           <li><a>Software Resources</a></li>
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-6" >
                        <h2 class="sub-menu-head">Software Resources</h2>
                        <ul class="sub-menu-lists" >
                           <li><a>Software Resources</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </div>
</div>
<!--Desktop end-->

Answer 1

你不能只从div.sub-menu-block元素中删除宽度：100％来删除4列菜单中的额外空白区域吗？

Answer 2

你可以使用

white-space:nowrap; 

要将名称保留在1行，请查看此处 CSS W3shcool attributes