Horizontal Primary and Sub menu is not align cente

Question

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.

This is how it structured

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

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.

Thank you very much.

Answer 1

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

Demo