菜單圖標不顯示，鏈接不起作用

我對網頁設計很陌生，無法弄清楚爲什麼我的手機下拉菜單在瀏覽器窗口中可以正常測試，但是當使用移動電話訪問黑色三角形時，第二個列表消失且沒有任何鏈接工作;當我觸摸它們時沒有任何反應。在「#nav UL」選擇，所以你可以看到菜單功能，通常這會是註釋掉：菜單圖標不顯示，鏈接不起作用

我註釋掉「無顯示」。

真的很感謝任何反饋，謝謝。

<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; 
} 

}

來源

2016-03-30 Patrick Wallace

您與菜單上懸停工作，觸摸屏並沒有真正模擬的.. – Goombah

在以前的版本（省略子菜單），我發現：懸停有觸摸顯示菜單的影響，並且它保持在屏幕上直到觸摸屏幕的另一部分;而焦點卻什麼都沒做。我在android和ios上測試了這個。在這個版本中，當使用just：hover時，按下菜單按鈕後，第一個菜單仍會按需顯示，但是有些東西會阻止鏈接正常工作，黑色三角形消失。 –

@PatrickWallace你能分享你的網頁鏈接嗎？ –

嘗試通過對母體

<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>

#nav ul li a { 
    display:block; 
}

如果給填充和其他樣式<a>標籤可能會更好，因爲：焦點在li標籤上不起作用。

未經測試，但可能會解決你的問題

來源

2016-03-31 07:57:26

試圖添加標記和顯示：塊像這樣... #nav li：hover ul li a，＃nav li：focus ul li a {display：block;} ....但這不起作用。然後想到也許z-index的列表項目被埋入所以添加#nav ul li a {z-index：1; }。任何人都認爲我在z-index的正確軌道上，我是否應用它有點不對？ –

沒有你做錯了，因爲我說重點不會工作李嘗試#nav李：懸停ul {顯示：塊}標籤肩部是默認阻止 –

實際上，我正在談論添加標籤在父李標籤其中ul在上面顯示 –

菜單圖標不顯示，鏈接不起作用

回答

相關問題