Noone seem to like styling questions here so I try to give you a hint here.
What I did is to copy my regular menu (horisontal or whatever doesn't matter) there's a good guide under the Docs section in this site where you get all the details.
In the modules advanced parameters tab, add a Module class-suffix like this: suffix_name (with a space before the suffix name)
Then you edit the css in the files:
/templates/mobile_pda/css/custom.css (for android phones)
/templates/mobile_iphone/css/custom.css (for iphones)
css code example: (mobMen is the Module class-suffix I used)
.mobMen ul { margin-top: -3px; list-style: none inside !important; background-color: #222; font-weight: bold; } .mobMen ul li { padding-bottom: 0; padding-left: 0;}
.mobMen li a:link, .mobMen li a:visited { background: #222 url(../resources/images/menu-bg.png) repeat-x 0 0; height: 18px; border-left: 1px solid #4B7027; border-right: 1px solid #4B7027; padding: 1.2em 0 0.8em 1.5em; color: #FFF; (here's the text color I used (white)) display: block; text-transform: uppercase; text-decoration: none; font-weight: 900;}
.mobMen li a:hover { background: none #3B56BC; 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;}
Hope this helps.
