我的网站有一个在 iOS 或 android 上不起作用的下拉菜单。我知道问题是由于这些设备上缺少光标，所以我希望将菜单从悬停操作切换到可点击操作。我缺乏适当的术语来明智地谈论这个主题，所以希望我的要求是有道理的。www.salvageinteriors.com
这是我的代码：
CSS：
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
z-index: 29;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 31px;
background-color: #ffffff;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
width: 940px;
}
#cssmenu > ul > li {
float: left;
margin-left: 45px;
margin-top: -20px;
position: relative;
}
#cssmenu > ul > li > a {
color: #000000;
font-family: calibri;
font-size: 18px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #000000;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #000000;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #ffffff;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #000000;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #000000;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #ffffff;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #ffffff;
color: #000000;
}
HTML：
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='http://www.salvageinteriors.com/p/work.html'> <span>Work</span></a>
<ul>
<li><a href='http://www.salvageinteriors.com/p/commercial.html'><span>Commercial Fixtures</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/furniture_13.html'><span>Furniture</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/accoutrements.html'><span>Accoutrements</span></a></li>
</ul>
</li>
<li><a href='http://www.salvageinteriors.com/p/about.html'><span>About</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/clients.html'><span>Clients</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/press.html'><span>Press</span></a></li>
<li><a href='http://salvageinteriors.bigcartel.com/' target='_blank'><span>Shop</span></a></li>
<li><a href='http://salvageinteriorsblog.com/' target='_blank'><span>Blog</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/contact.html'> <span>Contact</span></a></li>
</ul>
</div>