windows mobile上的css下拉菜单非常慢答案

【问题标题】：css dropdown menu very slow on windows mobilewindows mobile上的css下拉菜单非常慢
【发布时间】：2019-01-06 01:44:15
【问题描述】：

我只有在 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;

【问题讨论】：

标签： windows performance mobile dropdown

【解决方案1】：

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

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

强调文本CSS 古老的 :hover 伪类构成了许多 CSS 效果的支柱，当鼠标滑过页面上的元素时触发。然而，在当今不断变化的环境中，触摸屏输入与鼠标共享中心舞台，这给网站管理员带来了一些难题。基于触摸的设备为了不被如此普遍的 CSS 特性冷落，确实对悬停做出响应，但对它们来说，这是唯一可能的方式，即“点击”而不是实际的“悬停”。虽然这总体上是一件好事，但它会导致这些设备上所谓的“粘滞悬停”问题，其中 :hover 样式与用户刚刚点击的元素保持一致，直到他/她再次点击文档中的其他地方，或者在某些情况下，会在效果消失之前重新加载页面。

我使用了方法 4 - 根据当前用户输入类型动态添加或删除“can-touch”类。

祝你好运。标记

【讨论】：