html - 菜单图标不出现且链接不起作用

Question

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

我已经在“#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>

并将 block 显示到<a>

#nav ul li a {
  display:block;
}

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

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