Articles de navigation et de sous-navigation centrés dans CSS

Question

S'il vous plaît, j'ai besoin d'aide ici. Comment puis-je centrer horizontalement les éléments dans les deux barres de navigation? J'ai tout essayé à ma connaissance mais je n'ai pas obtenu le résultat souhaité.

http://codepen.io/vichid/pen/cHnmK

HTML:

 <nav> 
       <ul class="menu"> 
        <li> 
         <a href="#">Item 1</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 2</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 3</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 4</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 5</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 6</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item 7</a> 
         <ul class="sub-menu"> 
          <li><a href="#">Sub-item 1</a></li> 
          <li><a href="#">Sub-item 2</a></li> 
          <li><a href="#">Sub-item 3</a></li> 
          <li><a href="#">Sub-item 4</a></li> 
          <li><a href="#">Sub-item 5</a></li> 
          <li><a href="#">Sub-item 6</a></li> 
          <li><a href="#">Sub-item 7</a></li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 

CSS: 

    @import "compass/css3"; 

    // Parameters 

    $menuColor:#AFF8C4; 
    $subMenuColor:#9CE0C9; 
    $fontColor: #0E0500; 
    $menuWidth:940px; 
    $backgroundColor:#FFFCF6; 
    $borderRadius:4px; 
    $duration:0.33s; 

    body{ 
     background-color:$backgroundColor; 
    } 
    nav { 
     position: absolute; 
     top: 50%; left: 0; bottom: 50%; right: 0; 
    } 
    ul.menu{ 
     width: $menuWidth; 
     height: 40px; 
     line-height: 40px; 
     position: relative; 
     text-align: center; 
     margin: auto; 
     padding: auto; 
     background-color:$menuColor; 
     @include border-top-radius($borderRadius); 

     li{ 
      float: left; 
      width: auto; 
      a{ 
       display: block; 
       width: auto; 
       text-decoration: none; 
      } 
     } 
     li:hover 
     { 
      background-color:$subMenuColor; 
      @include transition-property(background-color); 
      @include transition-duration($duration); 
      @include border-top-radius($borderRadius); 

      ul{ 
       width: $menuWidth; 
       background: $subMenuColor; 
       visibility: visible; 
       @include opacity(1); 
       @include transition-property(opacity); 
       @include transition-duration($duration); 
       @include border-bottom-radius($borderRadius); 
      } 
     } 
    } 

    ul.sub-menu{ 
     @include opacity(0); 
     visibility: hidden; 
     display:block; 
     position: absolute; 
     left: 0; 
     height: 40px; 
     line-height: 40px; 
     background-color:$subMenuColor; 
     li:hover{ 
      @include border-bottom-radius($borderRadius); 
     } 
    } 

    ul.menu, 
    ul.sub-menu{ 
     a{ 
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
      color:$fontColor; 
      padding: 0 10px; 
     } 
    } 

Merci à l'avance!

Answer 1

Supprimez le flottant à gauche de votre balise li. Utilisez le list-style et display pour obtenir l'affichage souhaité.

li{ 
    list-style: none; 
    display: inline-block; 
    width: auto; 
    a{ 
     display: block; 
     width: auto; 
     text-decoration: none; 
    } 
} 

Preview: https://codepen.io/realhades/pen/jmKZvW