Reply To: [Solved] Dropdown Menu problem

[Paulie_D]

Centering

This is what you have now

#simplify-main-menu ul ul, .sub-menu, .sub-menu ul ul {
display: none;
float: left;
left: 0;
position: absolute;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-radius: 5px;
background: #F2F2F2;
background: rgba(242, 242, 242, 0.95);
padding: 5px;
box-shadow: 0px 0px 5px 0px #000000;
z-index: 10000;
}

You’ve told the sub-menu to be at the left side of the parent li (left:0).

If the sub-menu is to be centered under the parent li then we firstly need to push it over 50%…trust me..then pull it back 50% of it’s own width.

We do that with transform:translateX(-50%)

So now

#simplify-main-menu ul ul, .sub-menu, .sub-menu ul ul {
display: none;

float: left; /* this is doing nothing really */

left: 50%; /* new */
transform: translateX(-50%); /* new */

position: absolute;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-radius: 5px;
background: #F2F2F2;
background: rgba(242, 242, 242, 0.95);
padding: 5px;
box-shadow: 0px 0px 5px 0px #000000;
z-index: 10000;
}

..and they are centered under their respective parent(s) regardless of their own width OR the width of their parent.