Hovering over navigation bar

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><a href="#">Home</a></li>
    <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
    	<ul class="sub-menu">
    		<li><a href="ru.html">Russisch</a></li>
        </ul>
      </a>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

It should open underneath the "Projecten" tab, but is does this: problem

Answer 1

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><a href="#">Home</a></li>
    				<li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
    				<ul class="sub-menu">
    					<li><a href="ru.html">Russisch</a></li>
    				</ul>
    				</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</nav>

Answer 2

/* 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><a href="#">Home</a></li>
                        <li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
                        <ul class="sub-menu">
                            <li><a href="ru.html">Russisch</a></li>
                        </ul>
                        </a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>

Answer 3

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><a href="#">Home</a></li>
    				<li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i></a>
    				<ul class="sub-menu">
    					<li><a href="ru.html">Russisch</a></li>
    				</ul>
    				</li>
    				<li><a href="contact.html">Contact</a></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.