水平主菜单和子菜单不居中，为什么？答案

【问题标题】：Horizontal Primary and Sub menu is not align center, why?水平主菜单和子菜单不居中，为什么？
【发布时间】：2012-10-21 21:43:47
【问题描述】：

我正在从 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 代码。

非常感谢。

【问题讨论】：

标签： css menu center submenu

【解决方案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

【讨论】：

Shailender，子菜单还是垂直的，我要水平居中对齐，能否提供新的css？
Pakinai 请到这里来 :- chat.stackoverflow.com/rooms/15567/front-end-developer
我没有足够的要求在那里说话。
对了，能不能把子菜单调到中间？
您可以轻松设置定义位置：left;