水平主菜單和子菜單不對齊中心，爲什麼？

Question

我從Drupal建立簡單的網站，但主要和子菜單沒有對齊中心，因爲它應該。我已經嘗試了許多CSS3屬性，但沒有一個能夠工作。

這是它的結構

<div class="nav"> 
    <ul> 
     <li>Primary Menu 1</li> 
     <li>Primary Menu 2</li> 
      <ul> 
      <li>Submenu 2.1</li> 
      <li>Submenu 2.2</li> 
      </ul> 
     <li>Primary Menu 3</li> 
     <li>Primary Menu 4</li> 
    </ul> 
    </div> 

我想同時顯示的主要和子菜單是水平和調整與CSS3中心，我怎麼能做到這一點，請爲我提供全新的CSS代碼，請。

非常感謝。

Answer 1

我希望您正在尋找這樣的： -

HTML

<div class="nav"> 
    <ul> 
     <li>Primary Menu 1</li> 
     <li>Primary Menu 2 
      <ul> 
      <li>Submenu 2.1</li> 
      <li>Submenu 2.2</li> 
      <li>Submenu 2.3</li> 
      <li>Submenu 2.4</li> 
      </ul> 
     </li> 
     <li>Primary Menu 3</li> 
     <li>Primary Menu 4</li> 
    </ul> 
    </div> 

CSS

.nav ul { 
background:lightgrey; 
} 
.nav ul li { 
    display:inline-block; 
    margin:0 5px; 
    position:relative; 
} 
.nav ul li ul { 
display:none; 
padding:0 10px; 
} 
.nav ul li:hover ul { 
    display:block; 
    position:absolute; 
    left:0; 
    top:19px; 
    right:0; 
} 
.nav ul li ul li { 
    display:block; 
    margin:5px 0; 
    padding:0; 
} 

Demo