私のサイトには、iOS または Android で機能しないドロップダウン メニューが 1 つあります。これらのデバイスにカーソルがないことが問題の原因であることはわかっているので、メニューをホバー アクションからクリック可能なアクションに切り替えたいと考えています。この件について知的に話すための適切な用語が私にはありません。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>