html - Align Left under Centered Menu -

html - Align Left under Centered Menu -

i'm looking solution align sublist straight under centered main-point. here images allow know want achieve:

but now, when have centered main list point (leistungen), can't sublist want be. can center it:

the main problem is, main-list-point variable in width, can't utilize padding sub-list set under leistungen.

anyone knows possible solution?

here's structure:

<ul class="mainmenu"> <li><a href="#">leistungen</a> <ul> <li><a href="#">mehr leistungen</a> <li><a href="#">leistungen 2</a> <li><a href="#">und noch mehr davon</a> </ul> </li> </ul>

and css far:

.mainmenu { width:100%; display:table; padding-top:12px; } .mainmenu > li { display: table-cell; text-align:center; padding-bottom: 7px; } .mainmenu > li > { display:block; color: #636466; text-decoration:none; text-transform:uppercase; } .mainmenu ul { display:block; position:relative; } .mainmenu ul > li { position:relative; } .mainmenu ul > li > { color:#1a4787; text-decoration:none; }

update css below, include list-style:none class .mainmenu ul > li

css

.mainmenu ul{ display:inline-block; text-align:left; }

fiddle demo

html css