CSS выпадающие пункты меню на одной линии и горизонтальной прокрутки

Question

Plase см 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 

Вопросы

• Как бороться с длинными именами в пунктах меню? Мне хотелось бы, чтобы эти меню были размещены на одной линии.
• Если изменить размер окна браузера - появится небольшой горизонтальный прокрутка. По какой причине? Как избавиться?

Answer 1

1. Вместо изменения видимости, используйте display:none скрыть ul и display: block, чтобы показать. Это предотвратит появление полос прокрутки, вызванных выпадающими списками. вы получите полосу прокрутки, когда выпадающие активны, если видовой экран слишком мал

2. Набор white-space: nowrap и display: block на вложенной li, чтобы каждый пункт меню выпадающего на отдельной строке и предотвратить текст от наматывания

Примечание: Если это сайт на английском языке, или на языке, который читается слева направо, вы должны держать СЧА в середине или на левой стороне. Это дает вам максимальную экранную недвижимость для раскрывающихся списков. Размещение справа с несколькими слоями выпадающих меню вызовет проблемы с удобством использования (например, вам нужно прокрутить, чтобы увидеть выпадающие списки).

Наличие такого меню справа будет работать только на языке, читаемом справа налево, при этом выпадающие каскады в одном направлении.

Codepen Example

САСС

*, *: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%