菜单图标不显示，链接不起作用

我对网页设计很陌生，无法弄清楚为什么我的手机下拉菜单在浏览器窗口中可以正常测试，但是当使用移动电话访问黑色三角形时，第二个列表消失且没有任何链接工作;当我触摸它们时没有任何反应。在“#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在上面显示 –

菜单图标不显示，链接不起作用

回答

相关问题