Html 菜单图标不显示，链接不'；行不通

我对网页设计还很陌生，我很难弄明白为什么我的手机下拉菜单在浏览器窗口上运行良好，但是当使用手机访问时，表示第二个列表的黑色三角形消失了，所有链接都不起作用；当我触摸它们时，什么也不会发生

我已经注释掉了“#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;
}

}

选项1▾；











/*---所有样式--*/
身体{
背景颜色：浅蓝色；
}
#导航{
字体系列：无衬线；
z指数：1；
}
#导航a{
颜色：黑色；
}
#李国荣{
列表样式：无；
颜色：黑色；
}
#李海军：悬停{
位置：绝对位置；
能见度：可见；
显示：块；
}
#导航a：悬停{
颜色：黄色；
}
#海军ulli a{
文字装饰：无；
}
#导航ul{
位置：相对位置；
显示：无；
}
/*----仅限手机--*/
@媒体屏幕和屏幕（最大宽度：480px）{
#菜单项：悬停+ul，#菜单项：焦点+ul{
显示：块；
}
#导航ul{
位置：固定；
顶部：95px；
背景色：#E5；
字号：0.8em；
保证金：0；
填充：0；
宽度：120px；
z指数：1；
/*显示：无*/
}
#李国荣{
左边框：1px纯黑；
右边框：1px纯黑；
边框顶部：1件纯黑；
填充：0；
填充：10px 4px；
}
#李导航：悬停ul，#李导航：聚焦ul{
顶部：50px；
左：119px；
}
#李国宝{
字体大小：1.2米；
边框顶部：1件纯黑；
左边框：1px纯黑；
右边框：1px纯黑；
背景色：#E5；
填充：10px 4px；
宽度：130px；
}
#底部接头，#底部导航{
边框底部：1px纯黑；
}
}

尝试在父项上添加

标记

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

如果您给

标记加上填充和其他样式，效果会更好，因为：focus在li标记上不起作用

---

未经测试，但可能会解决您的问题

如果在该菜单上使用鼠标悬停，触摸屏不会真正模拟该功能..在上一版本（省略了子菜单）中，我发现：鼠标悬停具有触摸显示菜单的效果，并且在触摸屏幕的另一部分之前，鼠标悬停一直保持在屏幕上；然而：焦点什么也没做。我在android和ios上进行了测试。在这个版本中，当使用just:hover时，触摸菜单按钮后，第一个菜单仍然会按需要显示，但是有些东西正在停止链接的工作，黑色三角形消失。@PatrickWallace您可以共享页面的链接吗？尝试添加标记并显示：block like so#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的方法是正确的，而且我的应用有点错误吗？没有，你错了，因为我说的焦点在li上不起作用，试试看#nav li:hover ul{display:block}一个标记应该被默认阻止实际上我说的是在父li标记中添加标记，ul在上面的显示中，直到行为完全相同。当点击链接时，它不会像应该的那样变成黄色，实际上会使菜单栏再次消失，就好像我按下了背景上的任何地方一样。这就是为什么我认为这可能是一个z指数问题，但还没有用。可以在此处发布网站链接，以便您可以直接查看行为吗？www.duncanwallacemassage.com

#nav ul li a {
  display:block;
}