Drop down menu for iphone and android - css

Question

My site has one drop down menu which does not work in iOS or on android. I know the problem is due to the lack of cursor on these devices, so I'm looking to switch the menu from a hover action to a clickable one. I lack the proper terms to speak intelligently on this subject so hopefully what I'm asking makes sense. www.salvageinteriors.com
Here's my code:
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>

Answer 1

honestly, at least until everyone can figure out hovers for touch devices, we're kind of screwed when it comes to this stuff. There are two ways to work around this:
1) put all of your hover declarations behind a touch class and use Modernizr to add a touch class to your body element whenever the device is detected to be touch enabled.
2)Or you can just put your hover declarations inside of a media query that targets anything over 1024px.
Neither of these are very good solutions, but I will be the first to admit that I have used them before. I would probably use Modernizr if possible.