DropDown Aligned
<p>I have a menu with dropdown option, I'm trying to align the dropdown menu under the respective item selected from list. So far is aligned to the left, the dropdown ul list is inside the element that should display the dropdown list.</p>

<p>I'm not sure about what I'm doing wrong here, some suggestion?</p>

<p><a href="https://jsfiddle.net/qjqagthw/" rel="nofollow">DEMO</a></p>

<p>HTML</p>

<pre><code>    &lt;div id="menu"&gt;

        &lt;div id="menu-wrapper"&gt;
            &lt;img id="home-icon" src="images/home.svg" /&gt;

            &lt;nav id="menu"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;SUBSCRIBE&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;MARINA GUIDE&lt;/a&gt;&lt;/li&gt;
                &lt;li class="submenu"&gt;&lt;a href=""&gt;PRACTICAL&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href=""&gt;Glossary&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;Tips&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;OUT AT SEA&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;GEAR&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;FORUM&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/nav&gt;

            &lt;div id="menu-icon-container"&gt;
                &lt;img id="menu-icon" src="images/menu.svg" /&gt;
            &lt;/div&gt;

            &lt;div id="menu-icon-container"&gt;
                &lt;img id="menu-icon" src="images/search.svg" /&gt;
            &lt;/div&gt;



        &lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#menu-icon-container {
position: relative;
float: right;
height: 100%;
width: 60px;
background-color: ;

}

#menu-icon-container:hover {
background-color: #bf1b33;
cursor: pointer;
}

#menu-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
cursor: pointer;
}


#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
margin-left:20px;
}

#menu ul li {
display: inline;

}

#menu ul li a {
color: #00599b;
padding: 0px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-family: 'Open Sans', sans-serif;
}

#menu ul li a:hover {
border-bottom: 2px solid #bf1b33;
}

#menu ul ul
{
display:none;
position:absolute;
top:100%;

background: fuchsia;
padding:0
}

#menu ul ul li
{
float:none;
width:200px
}

#menu ul ul a
{
line-height:120%;
padding:10px 15px
}

#menu ul li:hover &gt; ul
{
display:block
}
</code></pre>