モバイルビューでサブリンクを表示

Question

ナビゲーションバーには異なるサブリンクがあります。

私は、モバイルビューにナビゲーションバーを省略したいと思います（すでにあることだ）が、それは、モバイルビュー内のすべてのリンク

HTML

<nav class= "clearfix"> 
    <ul class="clearfix navigation"> 
    <li> 
     <a href="bewerbung.html">Bewerbung</a> 
     <ul class="sub-menu" id="push"> 
     <li><a href="motivation.html">Motivation</a></li> 
     <li><a href="lebenslauf.html">Lebenslauf</a></li> 
     <li><a href="download.html">Downloads</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="index.html" id="push" style="height: 60px;">home</a> 
     <ul class="sub-menu" id="push"> 
     <li><a href="kontakt.html">Kontakt</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="design.html">Projekte</a> 
     <ul class="sub-menu" id="push"> 
     <li><a href="#">Photographie</a></li> 
     <li><a href="#">3D Animation</a></li> 
     </ul> 
    </li> 
    </ul> 
    <a href="#" id="pull">Menu</a> 
</nav> 

CSS

nav a { 
    transition:all linear 0.15s; 
    color: #fff; 
    display: table; 
    width: 250px; 
    text-align: center; 
    text-decoration: none; 
    line-height: 50px; 
} 
nav a:hover, nav a:active { 
    background-color: #ffffff; 
    color: #1D424A; 
} 
nav a#pull { 
    display: none; 
} 
nav a#mobile { 
    display: none; 
} 
.sub-menu{ 
    display:none; 
} 
nav li:hover .sub-menu { 
    display: inline-block; 
    z-index:1; 
    opacity:1; 
} 
.sub-menu { 
    width:250px; 
    padding:0px 0px; 
    position: absolute; 
    top:100%; 
    z-index:-1; 
    opacity:0; 
    transition:opacity linear 0.15s; 
    background:#1D424A; 
} 
.sub-menu li { 
    display:block; 
    font-size:16px; 
    color: #363636; 
} 
.sub-menu li a { 
    padding:0px 0px; 
    display:block; 
} 
.sub-menu li a:hover, .sub-menu .current-item a { 
    background:#fff; 
} 

CSSを表示しません。

nav { 
    height: auto; 
    border-bottom: 0; 
} 
nav ul { 
    display: none; 
    height: auto; 
} 
nav a#pull { 
    display: block; 
    background-color: #6A6A6A; 
    width: 100%; 
    position: relative; 
    margin-top: 0px; 
    color: #ffffff; 
} 
nav a#pull:after { 
    content:""; 
    width: 30px; 
    height: 20px; 
    display: inline-block; 
    position: relative; 
    right: 15px; 
    top: 10px; 
    margin-top: 0px; 
} 
nav li { 
    width: 100%; 
    float: left; 
    position: relative; 
} 
nav li a { 
    border-bottom: 1px solid #FFF; 
} 
nav a { 
    text-align: left; 
    width: 100%; 
    text-indent: 25px; 
    margin-top: 0px; 
} 
.sub-menu{ 
    display: block; 
} 

JAVASCRIPT

$(function() { 
    var pull = $('#pull'), 
     menu = $('nav ul'), 
     menuHeight = menu.height(); 

    $(pull).on('click', function(e) { 
    e.preventDefault(); 
    menu.slideToggle(); 
    }); 
}); 

$(window).resize(function() { 
    var w = $(window).width(); 
    if(w > 320 && menu.is(':hidden')) { 
    menu.removeAttr('style'); 
    } 
}); 

http://ti-sign.ch/navbar/

Answer 1

それは理由.navigationには50pxの固定heightのだ：

.navigation { 
    list-style: none; 
    overflow: hidden; 
    padding: 0; 
    margin: 0 auto; 
    width: 750px; 
    height: 50px; /* remove that line and it works */ 
}