水平主菜单和子菜单不对齐中心，为什么？

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