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>标签添加填充和其他样式，那会更好，因为：焦点对li标签不起作用。

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

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

1 个答案: