向下菜单和平板电脑答案

【问题标题】：Down menu and tablet向下菜单和平板电脑
【发布时间】：2015-10-31 08:32:15
【问题描述】：

我有一小段代码在 CSS 中显示一个小的弹出菜单，但它不适用于平板电脑，因为无法实现“悬停”。

如何简单地增强通过触摸屏一触即可滚动的菜单？

 <html>
 <head>
<title>Test</title>
<style type="text/CSS">
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:5px;
background-color: #2672ec;
font-family: "Segoe UI Light","Segoe UI Web Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","HelveticaNeue-Light","Helvetica Neue",Arial,sans-serif;
font-weight: bold;
color:white;
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding:5px;
border: 1px solid #2672ec;
}
#menu li a:hover {
border: 1px solid #ffffff;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}

#menu li:hover ul li {
float:none;
}

</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->

 </head>

 <body>

 <div id='menu'>
<ul>
    <li>Select menu &#9660;

    <ul>
        <li><a href="#">Modify</a></li>
        <li><a href="#">Delete</a></li>
    </ul>

    </li>
</ul>
 </div>

 </body>

 </html>

【问题讨论】：

标签： html css menu touch tablet

【解决方案1】：

你想改变什么以使用触摸屏添加:focus

拿下这个 .example:hover{......}

改成这个 .example:hover, .example:focus{......}

【讨论】：