Hovering over navigation bar - html

Question

I have a navigation bar with a sub navigation, but whenever i hover over a certain part of the navigation, the sub menu opens in a very strange way. Here's my code:
#menu {
background-color: rgba(0, 0, 0, 0.6);
width: 715px;
margin-left: 600px;
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
border-radius: 4px;
}
#menu ul li {
display: inline-block;
padding: 15px;
margin-left: 90px;
}
#menu ul li a {
text-decoration: none;
color: #FFF;
}
/* Sub-menu */
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
<nav id="menu">
<ul>
<li>Home</li>
<li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
<ul class="sub-menu">
<li>Russisch</li>
</ul>
</a>
</li>
<li>Contact</li>
</ul>
</nav>
It should open underneath the "Projecten" tab, but is does this:
problem

Answer 1

That's because you add an element to the menu as soon as you set something from display: none; to display: block;. This'll pull everything out of proportion and makes it look like it does.
The solution is position: absolute; to remove the submenu from the flow of the site. I'll show you an example, using your code:
#menu {
background-color: rgba(0,0,0,0.6);
width: 715px;
margin-left: 600px;
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
border-radius: 4px;
}
#menu ul li {
display: inline-block;
padding: 15px;
margin-left: 90px;
position: relative; /* This is needed to be able to set
the submenu relative to it's parent item */
}
#menu ul li a {
text-decoration: none;
color: #FFF;
}
/* Sub-menu */
#menu ul ul {
display: none;
/* Here we'll place it at the bottom of the menu item */
position: absolute;
top: 100%; /* This should equal the bottom of the item */
left: 0; /* To put it at the left side of the item */
/** And some basic styling to make it visible */
background: rgba(0,0,0,0.6);
}
#menu ul li:hover > ul {
display:block;
}
<nav id="menu">
<ul>
<li>Home</li>
<li>Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
<ul class="sub-menu">
<li>Russisch</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I hope this'll clear up enough for you to continue your work.
EDIT: Also cleared up the HTML. You shouldn't open a new UL in a link.

Answer 2

Use positioning. Here's how:
Add position: relative to the li elements.
Add position: absolute to the second level ul element.
Add some background color to the second level ul element.
This will show it as a dropdown menu.
Working example:
#menu {
background-color: rgba(0,0,0,0.6);
width: 715px;
margin-left: 600px;
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
border-radius: 4px;
}
#menu ul li {
display: inline-block;
padding: 15px;
margin-left: 90px;
position: relative; /*Added this*/
}
#menu ul li a {
text-decoration: none;
color: #FFF;
}
/* Sub-menu */
#menu ul ul {
display: none;
background-color: rgba(0,0,0,0.6); /*added this*/
position: absolute; /*and this*/
/*These two are positioning the dropdown relative to the bottom left corner of the parent item*/
left: 0;
top: 100%;
}
#menu ul li:hover > ul {
display:block;
}
<nav id="menu">
<ul>
<li>Home</li>
<li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
<ul class="sub-menu">
<li>Russisch</li>
</ul>
</a></li>
<li>Contact</li>
</ul>
</nav>

Answer 3

/* edit by Manish*/
.sub-menu {
background: #333 none repeat scroll 0 0;
left: 0;
position: absolute;
right: 0;
top: 49px;
}
.parent{
position: relative;
}
/* edit by Manish*/
Add "parent" class to parent "li"
<nav id="menu">
<ul>
<li>Home</li>
<li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
<ul class="sub-menu">
<li>Russisch</li>
</ul>
</a></li>
<li>Contact</li>
</ul>
</nav>