Question

我有一小段代码在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>

Answer 1

您希望更改为使用触摸屏添加:focus

接受此 .example:hover{......}

更改为 .example:hover, .example:focus{......}

下方菜单和平板电脑

1 个答案: