我在下方使用下面的CSS进行此导航设置。我在iOS Safari中遇到此导航问题,我无法弄清楚原因。它目前在IE,Firefox和Chrome中运行得非常好。 iOS上的导航看起来不错,但我根本无法在iOS中使用下拉列表。
标记:
<nav>
<ul>
<li><a href="localhost">Home</a></li>
<li class="dropdown">Nav One
<ul class="drop-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li class="dropdown">Nav Two
<ul class="drop-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
margin: 40px 0 0;
font-size: 12px;
}
.dropdown {
text-transform: uppercase;
font-family: "Montserrat",sans-serif;
display: block;
cursor: pointer;
transition: color 0.3s ease-in-out;
color: #423D39;
}
.dropdown:hover {
color: #e16086;
}
.drop-nav {
background: #D3AE95;
}
nav a {
text-decoration: none;
text-transform: uppercase;
display: block;
color: #423D39;
font-family: 'Montserrat', sans-serif;
transition: all 0.6s ease-in-out;
}
nav a:hover {
color: #e16086;
}
nav ul li ul li {
width: 160px;
padding: 10px;
font-size: 12px;
}
nav ul {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
list-style: none;
margin: 0;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul li:hover > ul {
display: block;
border: 1px solid rgba(255,255,255,0.4);
}
nav li {
position: relative;
margin: 0;
padding: 0 7px;
}
感谢。
答案 0 :(得分:0)
它不起作用,因为:悬停效果无法直接在触摸设备上使用。
一种可能的解决方案是通过添加此javascript(它使用jQuery,因此请确保包含jQuery库)向链接添加click事件侦听器:
$(function() {
$('nav > ul > li').on('click', function(){
//
});
});
然而,这个解决方案并不是非常优雅,并且不是真正用户友好的,因为您无法使用此方法关闭子区域。我建议您编写一些自定义的javascript,以确保导航适用于所有用户案例(例如,点击导航以外关闭等)。