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

의