DropDown Aligned

Question

У меня есть меню с раскрывающимся списком, я пытаюсь выровнять выпадающее меню под соответствующим элементом, выбранным из списка. Пока что выровнен слева, выпадающий список ul находится внутри элемента, который должен отображать раскрывающийся список.

Я не уверен, что я делаю неправильно здесь, какое-то предложение?

DEMO

HTML

<div id="menu"> 

     <div id="menu-wrapper"> 
      <img id="home-icon" src="images/home.svg" /> 

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

      <div id="menu-icon-container"> 
       <img id="menu-icon" src="images/menu.svg" /> 
      </div> 

      <div id="menu-icon-container"> 
       <img id="menu-icon" src="images/search.svg" /> 
      </div> 



     </div> 

CSS

#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 > ul 
{ 
display:block 
} 

Answer 1

Добавить position: relative; в #menu ul li { и left:0; к #menu ul ul сделает правильный ниже выбранного.

#menu ul li { 
    display: inline; 
    position: relative; 
} 

#menu ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background: fuchsia; 
    padding:0 
} 

Fiddle