I am developing a theme from fusion_core and facing a problem with the main menu (ie. the top menu). Right now it has 2 main items, one is Shopping and another is Services. In Services, there are 2 other items, one is Mobile and another is Cash. I'm using the following code in the file page.tpl.php to print the main menu.
print theme('links__system_main_menu', array( 'links' => $main_menu, 'attributes' => array( 'id' => 'gwt-main-menu', 'class' => 'hidenav', 'role' => 'menu', ), 'heading' => array( 'text' => t('Main menu'), 'level' => 'h2', 'class' => array('element-invisible'), ), ));
What I expect are
- The main menu items must be displayed on one-row only.
- The main menu item Services must be displayed like a drop-down menu and will show its sub menu items (ie. the Mobile and Cash menu items) only when user moves mouse to it.
In other words, it must be something like this
<ul role="menu" class="hide nav" id="gwt-main-menu"> <li class="dropdown active" id="mnu-shopping"> <a target="_self" href="/shopping/catalog">Shopping</a> </li> <li class="dropdown" id="mnu-service"> <a target="_self" href="service">Services <b class="caret"></b></a> <ul class="dropdown-menu " role="menu"> <li id="mnu-service-airtime"> <a target="_self" href="/service/mobile">Mobile</a> </li> <li id="mnu-service-cashadv"> <a target="_self" href="/service/cashadv">Cash</a> </li> </ul> </li> </ul>
However, when testing, I saw the main menu items are listed vertically in many rows (in this case 2 rows). Not only that, the main menu item Services does not display like a dropdown menu. When I viewed source, this is what I got.
Can someone please tell me what do I need to do to achieve the expectations above? I searched on the Internet but the posts I found don't help me at all. Although they all agree that I should override the functions in the file template.php, but they don't give me enough instructions of what I need to do or how I start. I'm new in themeing drupal 7. Please help! Thanks.