I am trying to figure out how to align a sublist directly under a main list point that is centered. I have attached some images to show what I am aiming for:
Currently, when I center the main list point (LEISTUNGEN), I am facing issues placing the sublist exactly where I want it to be. I am able to center it though:
The main issue here is that the width of the main list point varies, so simply using padding for the sub-list won't help in positioning it under LEISTUNGEN.
If anyone has a solution or idea, please share!
Below is my HTML structure:
<ul class="mainmenu">
<li><a href="#">Leistungen</a>
<ul>
<li><a href="#">more services</a>
<li><a href="#">Services 2</a>
<li><a href="#">And even more services</a>
</ul>
</li>
</ul>
and the CSS code I have used so far:
.mainmenu {
width:100%;
display:table;
padding-top:12px;
}
.mainmenu > li {
display: table-cell;
text-align:center;
padding-bottom: 7px;
}
.mainmenu > li > a {
display:block;
color: #636466;
text-decoration:none;
text-transform:uppercase;
}
.mainmenu ul {
display:block;
position:relative;
}
.mainmenu ul > li {
position:relative;
}
.mainmenu ul > li > a {
color:#1a4787;
text-decoration:none;
}