Question

我仅在Windows Mobile上具有非常慢的菜单下拉体验。可以在chrome和android pc等设备上正常工作。

image of drop down, GREEN sub menu is very very slow to apper on windows mobile phones (only) you have to keep the logon pressed for at least 1.5 secs before sub menu appears. I would be grateful if somebody could look at the CSS code an see if I need to add / alter any of the settings in CSS

我的导航代码的一小部分

<nav>
 <ul id="main-nav" class="clearfix">
 <li> <a href="#0">Log in&nbsp;&nbsp;</a>
  <ul>
    <li> <a href="/ydrxxx">Members area </a></li>
    <li> <a href="/rythe">Rythe Centre </a></li>
    <li> <a href="/xxx/email_IT_support.html" target="_blank">Members Email IT Support</a></li>
  </ul>
</li>
</nav>

#main-nav a {
	font-size: 100%;
	padding: 6px 5px 3px 3px;
	margin: 0px;
}
#main-nav a:hover {
	padding-right:20px;
	
}

#main-nav ul a {
	padding: 6px;
	height: 10px;
	width: auto;
	height: auto;
	line-height: 1;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
	font-size: 100%;
	background: #090;
	
}
#main-nav ul a:hover {
	background: #000;
}

#main-nav ul ul li:first-child a:after {
	position:absolute;
	left: -8px;
	
}
#main-nav ul ul {
	top: 0;
	left: 90px;
}
#main-nav ul a {
	width: auto;
	
}
#main-nav ul ul a {
	background: #f90;

Answer 1

我最终在这篇文章中找到了解决方案处理粘性的4种新颖方法：在移动设备上的悬停效果。

http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

强调文本 CSS古老的：hover伪类构成了许多CSS效果的支柱，当鼠标悬停在页面上的某个元素上时，就会触发这些效果。然而，在当今瞬息万变的环境中，触摸屏输入与鼠标共享中心位置，这给网站管理员带来了一些难题。基于触摸的设备试图通过这种普遍的CSS功能而不会被冷落，但它们确实对悬停做出了响应，但是以它们可能的唯一方式，是“轻按”与实际的“悬停”。尽管这总体上是件好事，但它会导致这些设备上的“粘滞悬停”问题，即：hover样式与用户刚刚点击的元素保持在一起，直到他/她再次轻按文档中的其他位置为止；或者在某些情况下，请在取消效果前重新加载页面。

我已使用方法4-根据当前用户输入类型动态添加或删除“可以触摸”类。

祝你好运。标记

Windows Mobile上的CSS下拉菜单非常慢

1 个答案: