菜單大小問題

我有一個問題，我的大菜單大小。桌面菜單有一個懸停下拉菜單。巨型菜單將是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-->

來源

2017-03-17 adam g

不知道我的理解什麼是你想完成的任務。你想要「.sub-menu-block」變窄嗎（爲了擺脫鏈接之間的空白），還是希望「.sub-menu-block」保持全寬並且只允許縮小鏈接？在第一種情況下，從「.sub-menu-block」中刪除widthh：100％在第二種情況下，從「sub-menu-head」和「sub-menu-lists」中刪除寬度並添加「display：inline-阻止「兩者。我希望這有助於。如果不是，請添加更多說明。 –

好的，謝謝你的回覆。我遵循你的建議，並從第4列菜單中刪除了空格。至於5列，一些菜單項目的名字很長，我無法縮短它們。我寧願讓他們停留在同一行上，而沒有換行，所以這些列需要調整到這個長度，並依次圍繞該菜單..我喜歡超大菜單調整以允許最長的文本。 –

你就不能刪除寬度：100％從div.sub - 菜單 - 塊元素從4列菜單中刪除額外的空白？

來源

2017-03-17 15:43:09 EricL

是的，但如何停止5列菜單中的單詞換行？這些菜單項需要放在一行上。我如何調整列和大型菜單以適合它？ –

Kartick說什麼。添加「white-space：nowrap;」到菜單項目LIs。 – EricL

它可以工作，但最後一列溢出通過菜單邊界。我怎樣才能調整子菜單塊？如果我將它設置爲100％寬度，則會發生溢流，如果將像1200px這樣的寬度設置爲4列的菜單太大。我需要根據列中最長的文本行來調整菜單的大小。 –

那麼你可以使用

white-space:nowrap;

對於這裏保持在1號線的名字看看 CSS W3shcool attributes

來源

2017-03-17 16:52:33

我試過了，並碰到了與下一列重疊的列文本。 –

菜單大小問題

回答

相關問題