My menu structure is set up as follows:
<nav id="main">
<ul id="nav-user">
<li class="user-name">
<span class="name">John Doe</span>
<ul class="submenu">
<li>Profile</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul id="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
I'm experiencing an issue with the positioning of ul.submenu. It seems to be overlapping ul#nav-main, albeit transparently:
I want to hide the ul#nav-main. How can I accomplish this?