CSS align submenu to parents element - html

Question

I have the following HTML snippet for my menu bar:
#menubar {
display: block;
background: #FFFFFF;
}
#menubar ul li a.menubutton {
display: none;
/* dont show burger symbol (mobile menu symbol) */
}
#menubar ul {
display: block;
width: 2em;
/* restrict burger symbol */
padding: 0.9em;
}
#menubar ul li {
display: inline;
}
#menubar ul li ul li {
display: none;
}
/*Header*/
header {
display: block;
background: #2F2C2C;
text-align: center;
}
/* Navigation */
nav {
display: block;
height: 2.5em;
background: #FFFFFF;
text-align: center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}
nav ul li a {
color: #454040;
font-size: 1.125em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition: background 0.2s;
/* nice transition effect */
-webkit-transition: background 0.2s;
}
nav ul li a:hover {
background: #DBD9D8;
border-bottom: 0.188em solid #FF0000;
}
nav ul li a.active {
border-bottom: 0.188em solid #E7590B;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul.submenu {
text-align: center;
position: fixed;
display: block;
margin-left: 40%;
}
nav ul li ul li:hover {
background: #DBD9D8;
border-bottom: 0.188em solid #FF0000;
}
<nav class="nav">
<ul>
<li>Start</li>
<li>Termine</li>
<li>Organisation
<ul class="submenu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li>About
<ul class="submenu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
The ul #submenu are displayed on hover.
I managed to center the submenus with the whole page using left: 40% in the nav ul li:hover ul.submenu rule. However, I want to position the submenus centered to their parent components, so taking organisation for example I'd like to have the page 2 submenu centered with the parents organisation field and for about the same.
How can I achieve to center relatively to the parent component?

Answer 1

Add position: relative to the menu entries which have a submenu (i.e. to the nav ul li selector) and change position: fixed to position: absolute for the submenu, i.e. the nav ul li:hover ul.submenu selector.
This makes the submenu position "relative" to their parent (the main menu entry), so you should then adjust the left and top settings in the submenu CSS rule accordingly.
#menubar {
display: block;
background: #FFFFFF;
}
#menubar ul li a.menubutton {
display: none;
/* dont show burger symbol (mobile menu symbol) */
}
#menubar ul {
display: block;
width: 2em;
/* restrict burger symbol */
padding: 0.9em;
}
#menubar ul li {
display: inline;
}
#menubar ul li ul li {
display: none;
}
/*Header*/
header {
display: block;
background: #2F2C2C;
text-align: center;
}
/* Navigation */
nav {
display: block;
height: 2.5em;
background: #FFFFFF;
text-align: center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
position: relative;
}
nav ul li a {
color: #454040;
font-size: 1.125em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition: background 0.2s;
/* nice transition effect */
-webkit-transition: background 0.2s;
}
nav ul li a:hover {
background: #DBD9D8;
border-bottom: 0.188em solid #FF0000;
}
nav ul li a.active {
border-bottom: 0.188em solid #E7590B;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul.submenu {
text-align: center;
position: absolute;
display: block;
left: -50%;
}
nav ul li ul li:hover {
background: #DBD9D8;
border-bottom: 0.188em solid #FF0000;
}
<nav class="nav">
<ul>
<li>Start</li>
<li>Termine</li>
<li>Organisation
<ul class="submenu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li>About
<ul class="submenu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

Hi I just read your question. So you will have to implement this with your own class names. But this is how to centre your child elements inside their respective parents.
.child-class{
width:max-content;
margin:0px auto;
}
In order for this to work you have to have a width. This will auto centre align your div or whatever tag you are using.
I recommend this method over position relative, because what's really convenient about using this method is that it will centre align your content evenly even if the different li tags are different widths. Which is convenient for mobile optimisation. :)