CSS Dropdown menu is not displaying properly

Question

I am having some kind of problem with my css and I am really frustrated over this ? 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;}

My problem is :

• My css drop down is not aligning with the li element.

Can anyone help me out ?

Answer 1

Try this one, there was a "padding" on your submenu list

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