菜单图标不出现，链接不起作用

Question

我对网页设计很陌生，我无法弄清楚为什么我的移动下拉菜单在浏览器窗口上可以正常测试，但是当使用手机访问时，表示第二个列表的黑色三角形消失了，并且所有链接都不起作用；当我触摸它们时没有任何反应。

我已经注释掉了 '#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>标签

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

#nav ul li a {
  display:block;
}

如果你给 <a> 标签添加填充和其他样式会更好，因为 :focus 不适用于 li 标签。

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