I need help with my menu structure.
<nav id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS I am using for this menu:
#nav ul li {
display: inline;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
Although the sub-menu items drop down correctly, they appear under the wrong parent list item (Home).
What adjustments can be made to ensure the sub-menus align correctly with their respective parent list items?