DropDown对齐

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