自適應導航欄

Question

我目前正在開發一個用於移動網站的導航欄。我已經得到了很多，但現在當我在子菜單中引入子菜單時，我被卡住了。對我而言，我無法修復它。

的jsfiddle鏈接：http://jsfiddle.net/TLEVU/1（請務必調整框的大小，看看有什麼我就約）

HTML：

<div class="menu-header"> 
     <ul id="menu-default" class="menu"> 
      <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-59"> 
       <a href="#">Menu Item 1</a> 
      </li> 
      <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"> 
       <a href="#">Menu Item 2</a> 
      </li> 
      <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249"> 
       <a href="#">Menu Item 3</a> 
       <ul class="sub-menu"> 
        <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"> 
         <a href="#">Sub Menu 1</a> 
        </li> 
        <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"> 
         <a href="#">Sub Menu 2</a> 
        </li> 
        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"> 
         <a href="#">Sub Menu 3</a> 
        </li> 
        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"> 
         <a href="#">Sub Menu 4</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

風格：

body { 
    font: 90%/160% Arial, Helvetica, sans-serif; 
    color: #666; 
    width: 900px; 
    max-width: 96%; 
    margin: 0 auto; 
} 

/* nav */ 
.menu-header { 
    margin: 20px 0; 
} 
.menu-header ul { 
    margin: 0; 
    padding: 0; 
} 
.menu-header li { 
    margin: 0 5px 10px 0; 
    padding: 0; 
    list-style: none; 
    display: inline-block; 
    *display:inline; /* ie7 */ 
} 
.menu-header a { 
    padding: 3px 12px; 
    text-decoration: none; 
    color: #999; 
    line-height: 100%; 
} 
.menu-header a:hover { 
    color: #000; 
} 
.menu-header .current_page_item a { 
    background: #999; 
    color: #fff; 
    border-radius: 5px; 
} 


@media screen and (max-width: 600px) { 
    .menu-header { 
     position: relative; 
     min-height: 40px; 
    } 
    .menu-header ul { 
     width: 100%; 
     padding: 5px 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     border: solid 1px #aaa; 
     background: #fff url(icon-menu.png) no-repeat 10px 11px; 
     border-radius: 5px; 
     box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    } 
    .menu-header li { 
     display: none; /* hide all <li> items */ 
     margin: 0; 
    } 
    .menu-header .current_page_item { 
     display: block; /* show only current <li> item */ 
    } 
    .menu-header a { 
     display: block; 
     padding: 5px 5px 5px 32px; 
     text-align: left; 
    } 
    .menu-header .current_page_item a { 
     background: none; 
     color: #666; 
    } 

    /* on nav hover */ 
    .menu-header ul:hover { 
     background-image: none; 
    } 
    .menu-header ul:hover li { 
     display: block; 
     margin: 0 0 5px; 
    } 
    .menu-header ul:hover .current_page_item { 
     background: url(icon-check.png) no-repeat 10px 7px; 
    } 
} 

任何幫助非常感謝，因爲這讓我很頭疼。

在此先感謝，亞歷克斯

Answer 1

對於響應式導航欄，我認爲這個鏈接應該對你有幫助。 請參閱演示並下載代碼。

http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/