菜单大小问题

我有一个问题，我的大菜单大小。桌面菜单有一个悬停下拉菜单。巨型菜单将是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

我试过了，并碰到了与下一列重叠的列文本。 –

菜单大小问题

回答

相关问题