I am currently working on a menu that includes dropdown options. My goal is to align the dropdown menu directly under the selected item from the list. However, at the moment, it appears aligned to the left and the dropdown ul list is within the element that should be displaying the dropdown list.
I'm unsure of what I might be doing incorrectly in this situation. Does anyone have any suggestions?
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
}