css - 水平主菜单和子菜单不居中，为什么？

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

演示