Paulina Svensson Paulina Svensson - 7 months ago 33
HTML Question

Make submenu appear under parent (center drop down menu)

I have some problem with my horisontal drop down menu. The sub_menu is not appearing under its parent. Can anyone help me get it right? What am I doing wrong? I want the menu to be 100% wide and centerd.



nav {
max-width: 100%;
text-align: center;
}
nav > ul > li {
padding: 10px;
display: inline;
}
nav ul li a {
font-family: sans-serif;
font-size: 1em;
color: #000;
}
nav ul li:hover .sub_menu {
display: block;
}
.sub_menu {
display: none;
position: absolute;
}

<nav>
<ul>
<li><a href="#">link 1</a>
</li>
<li><a href="#">link 2</a>
<ul class="sub_menu">
<li><a href="#">link 2.1</a>
</li>
<li><a href="#">link 2.2</a>
</li>
</ul>
</li>
<li><a href="#">link 3</a>
<ul class="sub_menu">
<li><a href="#">link 3.1</a>
</li>
<li><a href="#">link 3.2</a>
</li>
</ul>
</li>
</ul>
</nav>




Answer

Two steps

1. Set position: relative; for li:

nav > ul > li {
padding: 10px;
display: inline;
position: relative;
}

2. Set right: 0; for ul:

.sub_menu {
display: none;
position: absolute;
right: 0;
}

jsFiddle

Comments