I created a basic navigation bar using HTML Lists. The initial structure looks like this:
<div id="menu">
<nav>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
</div>
When I attempt to add a submenu, the structure changes to:
<div id="menu">
<nav>
<ul>
<li>
<a href="#">My Profile</a>
<ul>
<li><a href="#">My Questions</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
</div>
However, adding the submenu causes the design of the menu to be disrupted. Here is the relevant CSS:
#menu {
float: right;
margin-right: 5%;
}
#menu nav ul li {
display: inline;
padding: 5px;
}
#menu nav ul li a {
color: black;
text-decoration: none;
padding: 2px;
}
#menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
#menu nav ul li ul li {
display: block;
}
How can I resolve this issue and maintain the aesthetics of the menu?
Here is a link to illustrate what I have attempted: Link.
This is the desired outcome: