Question

请看这里的Codepen：http://codepen.io/anon/pen/JEAKo

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

Answer 1

使用display:none隐藏ul和display: block来显示，而不是更改可见性。这将防止由下拉列表引起的滚动条。 如果视口太小，当下拉列表处于活动状态时，您将获得滚动条
在嵌套white-space: nowrap上设置display: block和li，使每个下拉菜单项保持在自己的行上并阻止文本包装

注意：如果这是一个英语网站，或从左到右阅读的语言，您应该将导航保持在中间或左侧。这为您的下拉菜单提供了最大的屏幕空间。使用多层下拉菜单将其置于右侧将导致可用性问题（例如需要滚动以查看下拉列表）。

在右侧显示这样的菜单只适用于从右到左阅读的语言，下拉列表在同一方向上级联。

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下拉菜单项在一行和水平滚动条上

1 个答案: