メニューアイコンが表示されず、リンクが機能しない

Question

私はモバイル用のドロップダウンメニューがブラウザウィンドウ上で細かいテストを行う理由を知りませんが、携帯電話でアクセスすると黒い三角形2番目のリストは消え、リンクは機能しません。私がそれらに触れると何も起こらない。

私は '#nav ul'セレクタで 'display：none'をコメントアウトしていますので、メニューの機能を見ることができます。通常、コメントは解除されます。

ありがとう、感謝します。

<div id="nav"> 
    <img id="menubtn" src="images/menuIcon.png" alt="Menu button" /> 
    <ul> 
     <li><a href="index.htm">Home</a></li> 
     <li>Option 1 &#x25BE; 
      <ul> 
      <li><a href="">Option 1.1</a></li> 
      <li id="bottomSub"><a href="">Option 1.2</a></li> 
      </ul> 
     </li> 
     <li><a href="">Option 2</a></li> 
     <li><a href="">Option 3</a></li> 
     <li><a href="">Option 4</a></li> 
     <li><a href="">Option 5</a></li> 
     <li id="bottomNav"><a href="">Option 6</a></li> 
    </ul> 
</div> 


/*--- All style--- */ 

body{ 
    background-color:lightblue; 
} 

#nav{ 
    font-family:sans-serif; 
    z-index:1; 
} 

#nav a{ 
    color:black; 
} 

#nav ul li{ 
    list-style:none; 
    color:black; 
} 

#nav li:hover ul{ 
    position:absolute; 
    visibility:visible; 
    display:block; 
} 

#nav a:hover{ 
    color:yellow; 
} 

#nav ul li a{ 
    text-decoration:none; 
} 

#nav ul ul{ 
    position:relative; 
    display:none; 
} 






/* ----Mobile only---- */ 

@media screen and (max-width:480px){ 

#menubtn:hover + ul,#menubtn:focus + ul{ 
display:block; 
} 

#nav ul { 
    position:fixed; 
    top:95px; 
    background-color:#E5E5E5; 
    font-size:0.8em; 
    margin:0; 
    padding:0; 
    width:120px; 
    z-index:1; 
    /*display:none;*/ 
} 

#nav ul li{ 
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-top:1px solid black; 
    padding:0; 
    padding:10px 4px; 
} 

#nav li:hover ul,#nav li:focus ul{ 
    top:50px; 
    left:119px; 
} 

#nav ul ul li{ 
    font-size:1.2em; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    background-color:#E5E5E5; 
    padding:10px 4px; 
    width:130px; 
} 

#bottomSub, #bottomNav{ 
    border-bottom: 1px solid black; 
} 

} 

Answer 1

試し親<a>

#nav ul li a { 
    display:block; 
} 

へ

<li><a href="#">Option 1 &#x25BE;</a> 
     <ul> 
     <li><a href="">Option 1.1</a></li> 
     <li id="bottomSub"><a href="">Option 1.2</a></li> 
     </ul> 
    </li> 

と表示ブロックに<a>タグを追加することによって、あなたは<a>タグにパディングと他のスタイルを与える場合、それはので良いだろう：フォーカスliタグでは機能しません。

テストが、あなたはタッチスクリーンは本当にをエミュレートしていない、そのメニューにホバーと協力問題