c
 


  

This tutorial will show you how to create horizontal drop-down menus in your Joomla 1.5
website using the Extended Menu extension.

Disclaimer: Please note that this is an example tutorial. Exact steps might differ depending on the
Joomla 1.5 template you are using for your website. In order to successfully accomplish creating
a drop-down menu it might require at least basic knowledge of Joomla 1.5 CSS and the ability to
adjust the CSS code according to the specific needs of your website.

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
 ,Active Menu Class to  , Enable Menu Template to  and Element Id to . In
addition you have to select which menu should be loaded from the   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: