CSS内のナビゲーションとサブナビゲーションの項目を中心に

Question

ここをクリックしてください。 両方のナビゲーションバーにアイテムを水平に配置するにはどうすればよいですか？ 私の知る限りではすべてを試しましたが、望みの結果を得ることができませんでした。

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

ありがとう！

Answer 1

liタグに残っている浮遊物を取り除きます。希望の表示を得るにはlist-styleとdisplayを使用してください。

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

プレビュー：[？センターに未知の幅の順不同のリストを水平にする方法]のhttps://codepen.io/realhades/pen/jmKZvW