Справка меню CSS (второе меню исчезает)

Question

Я пытаюсь собрать это меню CSS, но я не могу заставить его работать правильно.Когда вы переходите по любой ссылке в верхнем меню, открывается второе меню, хотя второе меню исчезает при переходе по нему.Плюс, это неуместно.Я не мог разместить его слева: 0

http://tinyurl.com/7rxskdj

#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;}
#nmenu li.frst {margin-left:0}
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;}
#smedia {width:100px;height:30px;float:left;}
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;}
#fb {background-position: -1px -1px;}
#tw {background-position: -18px -1px;}
#pt {background-position: -35px -1px;}
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;}
#nmenu li:hover ul {display:block}
#nmenu li ul li {float:left;width:100px;}

Answer 1

попробуйте следующее css:

#nmenu li {
    display: inline;
    float: left;
    margin-left: 44px;
    position: relative;
}

#nmenu li ul {
    background-color: #FFFFFF;
    border: 1px solid red;
    display: none;
    left: -5px;
    padding: 0;
    position: absolute;
    top: 30px;
}

#nmenu li a {
    color: #979598;
    display: block;
    font: bold 11px/30px Tahoma,Geneva,sans-serif;
    letter-spacing: 2px;
    padding-left: 2px;
    text-decoration: none;
    text-transform: uppercase;
}

Answer 2

Чтобы исправить исчезающее меню: добавьте нижние отступы 5px к вашим якорям верхнего уровня, что устранит зазор между элементами.

Проблема "неуместного" связана с заполнением по умолчанию и полями на ulи li элементы.Явно установите поля и отступы, чтобы расположить их.

Answer 3

Вы применяете высоту к своему элементу списка вместо элемента ссылки внутри вашего li, поэтому переместите высоту и также примените к вашим тегам a высоту строки, которая соответствует высоте вашего блока меню и тогда вы можете просто изменить положение подменю, чтобы оно отображалось точно на 100% из вашего пункта меню, например:

CSS

#nmenu li a {
   height:30px;
   line-height:30px;
   display:block;
}

#nmenu li ul {
   top:100%;
}

Answer 4

Ваше абсолютное позиционирование оставляет зазор между контейнером <li> и дочерним элементом <ul>.Уменьшите значение "top" на #nmmenu li ul {}.