I have not exactly the dropdown menu on my sites but I have styled vertical list that is almost standard on mobile devices, I don't think it's necessary to complicate with a motin dropdown menu.
Here's my custom.css file styliong that you can play around with. Btw I used the iphone styling as a template when I started to play around with colors and other settings.
You also have to make a module suffix thet you can see in the code . mobMen you set it up as a module class suffix in the menu module with just a space and mobMen in the field.
Maybe you already knew this...
.mobMen ul {
margin-top: 3px !important;
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
list-style: none inside !important;
font-weight: bold !important;
width: 95%;
}
.mobMen ul li {
padding-bottom: 0;
padding-left: 0;
}
.mobMen li:first-child, .mobMen li:first-child a {
border-top: 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.mobMen li:last-child, .mobMen li:last-child a {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mobMen li a:link, .mobMen li a:visited {
background: #444;
height: 18px;
border: 1px solid #FFF;
padding: 1.2em 0 0.8em 1.5em;
color: #FFF;
display: block;
text-transform: uppercase;
text-decoration: none !important;
font-weight: 900 !important;
}
.mobMen li a:hover {
background: #2b2b2b;
height: 18px;
border-left: 1px solid #4B7027;
border-right: 1px solid #4B7027;
padding: 1.2em 0 0.8em 1.5em;
color: #FF0;
display: block;
text-transform: uppercase;
text-decoration: none;
}
