CSS:鼠标悬停在触摸设备上不工作-简单的替代方案

Question

我有一个纯CSS菜单，它使用li:hover来显示主导航按钮下方的下拉菜单。这是我的菜单…

<ul class="level-0" id="cssmw">
<li class="parent"><a href="page1.php">Page 1</a>
<ul class="level-1">
<li><a href="Page1Sub1.php">Page1Sub1</a></li>
<li><a href="Page1Sub2.php">Page1Sub2</a></li>
</ul>
</li>
<li class="parent"><a href="page2.php">Page 2</a>
<ul class="level-1">
<li><a href="Page2Sub1.php">Page2Sub1</a></li>
<li><a href="Page2Sub2.php">Page2Sub2</a></li>
</ul>
</li>
</ul>

…这是我的CSS:

ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: relative;
z-index: 999;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw li.hover > ul {
display: block;
position: absolute;
}
ul#cssmw li.current > ul {
position: absolute;
}
ul#cssmw > li {
background-image: none;
}
ul#cssmw > li > a, ul#cssmw > li > a:link {
background-image: url("../cssmw_images/btn-mainnav-off.png");
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
font-family: "myriad pro", Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
height: 65px;
margin: 0 0 0 0;
padding: 0 5px 0 5px;
text-align: center;
text-decoration: none;
width: 130px;
outline-style: none;
display: table-cell;
vertical-align: middle;
}
ul#cssmw > li > a:active, ul#cssmw > li > a:focus {
text-decoration: none;
outline-style: none;
}
ul#cssmw > li:hover > a, ul#cssmw > li:hover > a:link {
background-color: #FC9306;
background-image: url("../cssmw_images/btn-mainnav-on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}
ul#cssmw > li.hover > a, ul#cssmw > li.hover > a:link {
background-color: #FC9306;
background-image: url("../cssmw_images/btn-mainnav-on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}
ul#cssmw > li.current > a.current, ul#cssmw > li.current > a.current:link {
background-color: #FC9306;
background-image: url("../cssmw_images/btn-mainnav-on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a, ul#cssmw ul.level-1 > li > a:link {
background-image: url("../cssmw_images/btn-mainnav-sub1off.png");
background-repeat: no-repeat;
color: #FFFFFF;
font-family: "myriad pro", Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
height: 65px;
margin: 0 0 0 0;
text-align: left;
padding: 0 5px 0 10px;
text-decoration: none;
width: 235px;
outline-style: none;
display: block;
vertical-align: middle;
line-height: 65px;
}
ul#cssmw ul.level-1 > li > a:active, ul#cssmw ul.level-1 > li > a:focus {
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 > li:hover > a, ul#cssmw ul.level-1 > li:hover > a:link {
background-image: url("../cssmw_images/btn-mainnav-sub1on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 > li.hover > a, ul#cssmw ul.level-1 > li.hover > a:link {
background-image: url("../cssmw_images/btn-mainnav-sub1on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 > li.current > a.current, ul#cssmw ul.level-1 > li.current > a.current:link {
background-image: url("../cssmw_images/btn-mainnav-sub1on.png");
background-repeat: no-repeat;
text-decoration: none;
outline-style: none;
}

在触摸屏设备上，当用户触摸或不触摸初始按钮时，显然没有"悬停"状态，如果该按钮本身是指向另一个页面的链接，那么它就会跳转到该页面，用户看不到子菜单。

有一个简单的解决办法吗?我希望，理想情况下，在触摸屏设备上，初始触摸显示下拉菜单，从那里，第二次触摸触发链接。

如有任何建议，我将不胜感激。谢谢你！新泽西

Answer 1

我有一个想法，但你必须使用计时器:在第一次触摸计时器将启动，例如，2秒后，如果触摸已经在，你将显示菜单。附:我的英语不好!