水平主菜单和子菜单未居中对齐，为什么? [英] Horizontal Primary and Sub menu is not align center, why?

问题描述

我正在从Drupal构建一个简单的站点，但是主菜单和子菜单未按应居中的位置对齐.我已经尝试了许多CSS3属性，但是它们都不起作用.

I'm building simple site from Drupal but the primary and submenu are not aligned center as it should. I have tried many of CSS3 properties but none of them is working.

这是它的结构

<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代码.

I want to display both of primary and submenu to be horizontal and align center with CSS3, how can I do that, please provide completely new CSS code for me please.

非常感谢您.

推荐答案

我希望你看起来像这样:-

I hope you are looking like this :-

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

演示

这篇关于水平主菜单和子菜单未居中对齐，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！