我正在构建一个带有子菜单的导航菜单,只有CSS(媒体查询)和html。
它可以很好地工作,但问题是: 在移动浏览器上,当我点击任何子菜单时,它将无法工作,有时它只是重定向到第一个菜单地址,有时甚至没有重定向。在计算机浏览器上它也可以正常工作。
这是我的代码:
#nav{
position: relative;
height: 100%;
}
#nav ul{
margin: 0px;
padding: 0px;
height: 100%;
}
#nav ul li{
list-style: none;
float: left;
height: 100%;
border-right: black solid 2px;
text-align: center;
padding: 0px 15px 0px 15px;
}
#nav ul li:hover{
background: #47350e;
}
#nav ul li a{
position: relative;
font-family: 'Oswald';
font-size: 18px;
color: white;
text-transform: uppercase;
text-decoration: none;
top: 15px;
}
#nav ul li a:hover{
}
#nav ul li .children li{
border: 0px;
}
#nav ul li .children li a{
font-size: 13px;
top: 5px;
font-weight: normal;
}
#nav ul li .children li a:hover{
text-decoration: underline;
}
#nav ul li .children{
display: none;
position: absolute;
left: 0px;
top: 46px;
height: 30px;
width: 100%;
background: #47350e;
padding-left: 120px;
z-index: 5;
}
#nav ul li:hover .children{
display: block;
}
和HTML
<div id="nav">
<ul id="nav-items">
<li>
<a href=#>option 1</a>
</li>
<li>
<a href=#>option 2</a>
<ul class="children">
<li>
<a href=#>option 3</a>
</li>
<li>
<a href=#>option 4</a>
</li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分:3)
对于移动版本,您可以使用选择菜单。
<div id="mobile_menu">
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</div>
CSS是 在正常的CSS中
#mobile_menu{display:none;}
移动
@media only screen and (min-width: 320px) and (max-width: 479px) {
#mobile_menu{display:block;}
#nav{display:none;}
}
答案 1 :(得分:0)
可能你的#nav ul li a {
规则造成混乱。
position: relative;
top: 15px;
适用于两个级别,即选项1和选项3
检查这是否是问题。如果不解决,请分享您的代码链接。