Question

Здравствуйте. Нашел интересное меню, чуть подправил под себя, ну не до конца(
Не могу никак сделать его по высоте 50 пикселей, если сделать height: 50px; то потом ломается все выпадающее меню. А выпадающее может быть разным (длина, количество слов).
Там видимо с позиционированием нужно разобраться...

Вот весь код меню:

*, *:before, *:after{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 font-family: 'Lato', sans-serif;
}

/*| Navigation |*/

#nav2{

 height: 50px;
 width: 1000px;
 background: #fff;
 box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
 border-radius: 10px;
 margin: 5px auto;
}
 #nav2 ul{
 list-style: none;
 position: relative;
 margin-right: 224px;
 display: inline-table;
 }
 #nav2 ul li{

 height: 50px;
 float: left;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 }

 #nav2 ul li:hover{background: rgba(0,0,0,.15);}
 #nav2 ul li:hover > ul{display: block;}
 #nav2 ul li{
 float: left;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 }
 #nav2 ul li a{
 display: block;
 padding: 30px 20px;
 color: #222;
 font-size: 1.33em;
 letter-spacing: 1px;
 text-decoration: none;

position: relative;
top: -10px;
 }
 #nav2 ul ul{
 display: none;
 background: #fff;
 position: absolute;
 top: 100%;
 box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
 border: 1px solid rgba(0,0,0,.1);
 }
 #nav2 ul ul li{float: none; position: relative;padding-top: 10px;} Добавить
 #nav2 ul ul li a {

height: 60px; Удалить это лишнее
 padding: 15px 30px;
 border-bottom: 1px solid rgba(0,0,0,.05);
 }
 #nav2 ul ul ul {
 position: absolute;
 left: 100%;
 top:0;
 }

Знаю, что ответ где то близок, ну вот башка что то не варит.

Answer 1

Внесите правки выделенные красным выше.

Comments

Спасибо огромное. Помогло.