Wondering if anyone can help me with a workaround for this. The theme I run on wordpress.org appears to use a super fish dropdown menu for its main navigation, which works fine on desktop browsers as it employs a mouse hover to reveal the menu. 

Is there anyway of adapting this, or adding code, so that when visiting on a mobile browser I can get the dropdown menu to activate.

I would greatly appreciate any help with this. Here is the code that I found in the CSS editor for the theme:

Superfish Drop down menu

--------------------------------- */

.top_menu {

z-index:9999;

position:absolute;

top:140px;

right:0px;

width:600px;

height:40px;

}

.sf-menu, .sf-menu * {

z-index:9999;

margin: 0;

padding: 0;

list-style: none;

font-size: 13px;

}

.sf-menu {

z-index:9999;

line-height:100%;

position:absolute;

right:0;

bottom:0;

float:left;

}

.sf-menu ul {

z-index:9999;

position: absolute;

top: -999em;

width: 20em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

z-index:9999;

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

}

.sf-menu a {

display: block;

position: relative;

padding: .75em 1.3em;

text-decoration:none;

font-weight:bold;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 2.5em; /* match top ul list item height */

z-index: 99;

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 10em; /* match ul width */

top: -10px;

margin-left: 2px;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 10em; /* match ul width */

top: -11px;

}

.sf-menu ul a

{

font-size:12px;

}

.sf-menu li ul {

padding:10px 12px 10px 10px;

}

.sf-menu a.sf-with-ul {

padding-right: 30px;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

top: 1em;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; top:0.75em; }

.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}