Step 1.You need to install the Extended Menu module in your Joomla application. For more information on how to install extensions to Joomla check our tutorial on How to install extensions to your Joomla website. The module can be downloaded from the Official website of its creators.
Step 2.Go to Extensions -> Module Manager and click on the newly installed Extended Menu module.
Step 3. Now you have to configure the Extended Menu module. It provides you with the ability to set many different variables that change the way your menus will work. You can, however, leave most of the settings in their default values. You can only change the Menu Style option to Tree List ,Active Menu Class to Both, Enable Menu Template to No and Element Id to Yes. In addition you have to select which menu should be loaded from the Menu Name drop-down box.
Step 4. Now you have to organize your menus properly in order to make them display as a drop-down menus. For the purpose of this tutorial we will create a sub-enu of the Features menu and display it as a drop-down. To do this go to the Menus -> Top Menu(or if you changed the name of this menu - the one you have set) page and click on the New button. Once you set your menu to display the desired content, make sure you set its "parent" menu. In our case that will be the Features menu.
For more information on how to create menus take a look on our tutorial on Creating articles in Joomla.
Step 5. Finally you should add to your CSS file some lines that specify the behavior of the drop-down menu. You can simply add those lines at the end of the stylesheet file of your template (usually template.css):
ul#menulist_root li ul {
display:none;
}
ul#menulist_root li:hover ul{
display:block;
background:none;
}
ul#menulist_root li ul li{
background:#000000;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
clear:both;
}
ul#menulist_root li ul li a{
background:none;
width:66px;
}
ul#menulist_root li ul li a:hover{
color:#AA0000;
background:none;
}
This style sheet will display a stylish, transperant drop-down menu once you point your mouse to the Features menu (i.e. on hover). You can use different CSS to achieve the looks you want for your menus.
Well done! you have successfully added a stylish horizontal drop-down menu to your Joomla website! At this point your page should look like this:
