CSS панель навигации авто высота

-1

Я хочу, чтобы установить второй уровень навигатора будет автоматически высота, перейти на новую строку, когда слишком долго.

HTML:

<ul id="menu"> 
    <li><a href="">About Us</a> 
     <ul> 
      <li><a href="">Introduction</a></li> 
      <li><a href="">Orgaizational Structure</a></li> 
      <li><a href="">Mission&Vision</a></li> 
     </ul> 
    </li> 
</ul>

CSS:

* { 
    padding: 0; 
    margin: 0; 
} 

#menu { 
    list-style: none; 
    font-size: 0.8em; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 

    background: #dddddd; 
    height: 40px; 
    width: 800px; 
    float: left; 
} 

#menu li { 
    display: block; 
    position: relative; 
    float: left; 
} 

#menu li ul { 
    display: none; 
} 

#menu li a { 
    display: block; 
    text-decoration: none; 
    padding: 12px 15px; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

#menu li:hover ul { 
    display: block; 
    position: absolute; 
    background: #dddddd; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 
    width: 100px; 
}

Выполнить его здесь: http://jsfiddle.net/U72Hm/

источник

2014-01-11 Ovilia

Ваша скрипка кажется (по крайней мере, в firefox), чтобы правильно отображать высоту, пожалуйста, можете ли вы более четко объяснить, что такое ваша проблема? – Alfie

@Alfie Отображаемое изображение - это текущий стиль, а не идеальный. В идеальном случае «Структура» должна быть в новой строке. – Ovilia

Я не уверен, что вы просите, но если вы хотите, чтобы ваш текст, чтобы обернуть к новая линия, изменить white-space:no-wrap; до white-space:normal для menu li a{...}.

источник

2014-01-11 02:35:20

Спасибо, это именно то, что я хотел. – Ovilia

Нет проблем. вы можете принять это правило все вместе. В большинстве браузеров по умолчанию используется пустое пространство: нормальное. –

Хотя этот ответ технически не отвечает на вопрос, есть некоторые отличные ресурсы для меню здесь http://www.cssplay.co.uk/menus/, объясняя, почему принимаются определенные решения CSS и для каких браузеров.

источник

2014-01-11 02:37:20 click2install

CSS панель навигации авто высота

ответ

Смежные вопросы