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

标签 html css drop-down-menu responsive-design

我对网页设计还很陌生,我无法弄清楚为什么我的移动下拉菜单在浏览器窗口上运行良好,但是当使用手机访问时,表示第二个列表的黑色三 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;
}

}

最佳答案

尝试添加 <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 标记。

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

关于html - 菜单图标不出现且链接不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36308727/

相关文章:

html - 浏览器如何分析没有<table>的<tr> <td>?

javascript - 滚动后更改 Bootstrap 导航栏品牌 Logo 图像的最佳方法?

css - 在 960.gs div 中垂直对齐图像?

css - 如果 ul 有 ul child ,是否有 CSS 方法添加箭头?

html - 我在哪里可以获得下拉列表的职位/职业列表?

html - Colgroup 和 Col 在桌面上不可见

使用 div 的 CSS 布局

html - Flexbox 的麻烦

css - 如何更改 Material-UI <TextField/> 的标签颜色

javascript - JS输出选项选择值作为链接中的获取参数