CSS下拉菜单项

问题描述：

Plase看到Codepen这里：http://codepen.io/anon/pen/JEAKo CSS下拉菜单项

HTML：

<div class="container"> 
<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Products</a> 
      <ul> 
       <li><a href="#">Product group 1</a></li> 
       <li><a href="#">Product group 2 with long name</a> 
        <ul> 
         <li><a href="#">Product 1</a></li> 
         <li><a href="#">Product 2 with long name</a></li> 
         <li><a href="#">Product 3</a></li> 
         <li><a href="#">Product 4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Gallery</a> 
      <ul> 
       <li><a href="#">Gallery 1</a></li> 
       <li><a href="#">Gallery 2 with long name</a> 
        <ul> 
         <li><a href="#">Subgallery 1</a></li> 
         <li><a href="#">Subgallery 2</a></li> 
         <li><a href="#">Subgallery 3</a></li> 
         <li><a href="#">Subgallery 4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Contacts</a></li> 
    </ul> 
</nav>

SASS（+罗盘）

*, *:before, *:after 
    box-sizing: border-box 

.container 
    max-width: 1140px 
    margin: 0 auto 
    background-color: lightblue 
    border: 1px black solid 
    &:after 
    clear: both 
    display: table 
    content: ' ' 
    height: 0 
nav 
    height: 86px 
    background-color: yellow 
    float: right 
    a 
    text-decoration: none 
    color: blue 
    &:visited 
     color: blue 
    li 
    display: inline-block  
    position: relative 
    &:hover 
     > ul 
     visibility: visible 
    > ul 
    > li:hover 
     background-color: #ddd 
     & > a 
     border-bottom: 3px darkred solid 
    > li > a 
     padding: 0 15px 
     display: table-cell 
     vertical-align: middle 
     height: 86px 
     border-bottom: 3px transparent solid 
    ul 
     position: absolute 
     visibility: hidden 
     background-color: #eee 
     li 
     border-bottom: 2px #bbb solid 
     > a 
      display: block 
      padding: 10px 15px 
      border-left: 3px transparent solid 
     &:hover 
      background-color: #ddd 
     &:hover > a 
      border-left: 3px darkred solid 
     ul 
     left: 100% 
     top: 0

问题

如何处理菜单项中的长名字？我希望这些菜单放在一行上。
如果我调整浏览器窗口大小 - 出现小水平滚动。是什么原因？如何摆脱？

Scrollbar

喜欢[本示例]（http://codepen.io/anon/pen/kbole）？使用'white-space：nowrap;显示：块;'在'nav> ul ul li' – misterManSam 2014-09-23 08:37:18

谢谢。它解决了第一个问题。但现在水平滚动条要长很多:( – Lari13 2014-09-23 08:44:12

答

而是不断变化的知名度，用display:none隐藏ul和display: block显现。这将防止下拉引起的滚动条。 您将获得滚动条时，下拉菜单是积极的，如果视口太小
集white-space: nowrap和display: block在嵌套li保持对自己的行每个下拉菜单项，防止文本包装

注意：如果这是一个英文网站，或从左向右阅读的语言，则应该将nav保留在中间或左侧。这为您的下拉菜单扩展提供了最大的屏幕空间。将它放在右边并且有多层下拉菜单会导致可用性问题（例如需要滚动查看下拉菜单）。

在右侧有一个这样的菜单只适用于从右向左阅读的语言，并且下拉在相同方向上级联。

Codepen Example

SASS

*, *:before, *:after 
    box-sizing: border-box 

.container 
    max-width: 1140px 
    margin: 0 auto 
    background-color: lightblue 
    border: 1px black solid 
    &:after 
    clear: both 
    display: table 
    content: ' ' 
    height: 0 

nav 
    height: 86px 
    background-color: yellow 
    float: right 
    a 
    text-decoration: none 
    color: blue 
    &:visited 
     color: blue 


    li 
    display: inline-block  
    position: relative 
    &:hover 
     > ul 
     display: block 

    > ul 
    > li:hover 
     background-color: #ddd 
     & > a 
     border-bottom: 3px darkred solid 

    > li > a 
     padding: 0 15px 
     display: table-cell 
     vertical-align: middle 
     height: 86px 
     border-bottom: 3px transparent solid 

    ul 
     position: absolute 
     display: none 
     background-color: #eee 

     li 
     border-bottom: 2px #bbb solid 
     white-space: nowrap 
     display: block 

     > a 
      display: block 
      padding: 10px 15px 
      border-left: 3px transparent solid 
     &:hover 
      background-color: #ddd 

     &:hover > a 
      border-left: 3px darkred solid 

     ul 
     top: 0 
     left: 100%

CSS下拉菜单项

相关推荐