Выпадающее меню CSS отображается неправильно

Question

У меня проблема с моим css, и я действительно разочарован этим? HTML:

<div id="nav"> 
    <ul> 
     <li><a href="#">Home</a> 
      <ul> 
       <li><a href="#">More</a></li> 
       <li><a href="#">Hawa</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Resume</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

CSS:

#nav {background: #008080;position:relative;} 
#nav ul {list-style:none;display:flex;position:relative;} 
#nav ul li {width: 50px;display:inline-table;padding: 10px 20px;position:relative;} 
#nav ul li:hover {background:#333;} 
#nav ul li:hover > ul {display: block;position:absolute;margin-left:0px;width:100%;} 
#nav ul li a{text-decoration:none;font-family:Verdana;color:#fff;} 
#nav ul ul {display:none;} 
#nav ul ul li {background: #008080;} 

Моя проблема:

• Мой CSS падение вниз не совместив с элементом LI.

Может ли кто-нибудь помочь мне?

Answer 1

Попробуйте это, там был "отступы" в списке подменю

#nav ul li:hover > ul { 
    display: block; 
    position:absolute; 
    left:0px; 
    width:100%; 
    padding-left:0px; 
} 

Answer 2

использование отрицательной маржи значение http://jsfiddle.net/5tz0zszy/

Я сделал изменения битную в CSS

#nav { 
background: #008080; 
position:relative; 
} 
#nav ul { 
list-style:none; 
display:flex; 
position:relative; 
} 
#nav ul li { 
width: 50px; 
display:inline-table; 
padding: 10px 20px; 
position:relative; 
} 
#nav ul li:hover { 
background:#333; 
} 
#nav ul li:hover > ul { 
display: block; 
position:absolute; 
margin-left:-60px;width:100%; 
} 
#nav ul li a{ 
text-decoration:none; 
font-family:Verdana; 
color:#fff; 
} 
#nav ul ul { 
display:none; 
} 
#nav ul ul li { 
background: #008080; 
} 

Answer 3

СБРОС ВАША CSS *{box-sizing:border-box;padding:0; margin:0;}

добавить отступы к anchors не list

DEMO

*{box-sizing:border-box;padding:0; margin:0;} 
#nav {background: #008080;position:relative;} 
#nav ul {display:flex;position:relative;} 
#nav ul li {list-style:none;float:left;position:relative;} 
#nav ul li:hover {background:#333;} 
#nav ul li > ul {position:absolute;} 
#nav ul li:hover > ul {display: block;} 
#nav a{text-decoration:none;font-family:Verdana;color:#fff;display:block;clear:both;padding: 10px 20px;} 
#nav ul ul {display:none;position: absolute;left: 0;} 
#nav ul ul li {background: #008080;display:block;width:100%;} 

Answer 4

Простой добавить это:

#nav ul li:hover > ul { 
    display: block; 
    position:absolute; 
    margin-left:0px; 
    width:100%; 
    left: 0;/*Add this*/ 
    padding: 0;/*Add this*/ 
    top: 40px;/*Add this*/ 
} 

Также изменения до display: block#nav ul li {width: 50px;display:block;padding: 10px 20px;position:relative;}. Проверьте меню возобновления.

fiddle