Отзывчивая панель навигации

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

Для Отзывчивый Navbar, я думаю, что эта ссылка должна быть hepful к вам. Пожалуйста, просмотрите демо-версию и загрузите код.

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