How to center the absolute dynamic width of a ul submenu?
I found many posts about centering submenus <ul>
with absolute positioning, but none of them solved the problem of centering submenus with dynamic width based on the text length of children <li>
...
Most of these posts suggest a solution based on using the negative margin-left
,
which means it can only work for a specific width, but not for a dynamic width!
So I prepared a quick FIDDLE HERE with a very simple menu,
can you please help me figure out how the submenu can be automatically centered?
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
margin: 0 20px;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
}
ul ul li {
margin: 0;
display: block;
}
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">aa aa aa aa</a></li>
<li><a href="#">bb bb</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">cc cc cc</a></li>
<li><a href="#">dd dd dd dd dd</a></li>
<li><a href="#">ee ee ee</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">ff ff</a></li>
<li><a href="#">gg gg</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
+3
source to share
1 answer
You can use transform
.
ul ul {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
With additional configuration as follows.
ul li {
position: relative;
}
ul ul li {
white-space: nowrap;
}
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
ul li {
display: inline-block;
margin: 0 20px;
position: relative;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
left: 50%;
transform: translateX(-50%);
}
ul ul li {
margin: 0;
display: block;
white-space: nowrap;
}
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">aa aa aa aa</a></li>
<li><a href="#">bb bb</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">cc cc cc</a></li>
<li><a href="#">dd dd dd dd dd</a></li>
<li><a href="#">ee ee ee</a></li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">ff ff</a></li>
<li><a href="#">gg gg</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
0
source to share