居中菜單左對齊

我正在尋找一種解決方案，以直接在居中主要點下對齊子列表。下面是一些圖片，讓你知道我想要實現：居中菜單左對齊

enter image description here

但現在，當我有一箇中心主列表點（LEISTUNGEN），我不能得到，我想它的子列表成爲。我可以居中：

enter image description here

的主要問題是，主列表點是寬度可變，所以我不能只用一個填充的子列表把它LEISTUNGEN下。

任何人都知道可能的解決方案？

這裏是我的結構：

<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>

和CSS至今：

.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; 
}

來源

2014-10-08 Andi

更新與以下，還包括list-style:none到類.mainmenu ul > li

CSS

你的CSS

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

Fiddle Demo

來源

2014-10-08 07:13:49 Aru

居中菜單左對齊

回答

相關問題