thx for this. but if i click on a mainmenu and the sub are shown an i hover over another menu item this will overlay over the active one. solution?
Dropdown Menu Horizontal List
The feature of this menu is that the active sub-items are visible and always on top.
Module setting
The module parameter "Show sub-menu items" is set to "Yes".
Print screen without additional CSS
1. Design your menu
When you want to create a menu it is recommended to design your menu first (e.g. Photoshop or simular software). It is easier to determine the size of the elements in pixels and to create background images for the menu items.
For this menu the main items have a width of 105 pixels. The width of the subitems are determined by the width of the menu text. The height of the main items is 22 pixels and of the sub-items 20 pixels.
2. Style the container of the menu
The Module Class Suffix of this example menu is: "_dropdownhorizontaal".
We first style the container of the menu (applied for the menu at the top of this page).
div.moduletable_dropdownhorizontaal {
width: 525px;
height: 44px;
margin-bottom: 20px;
position: relative;
}
The module container is styled "position: relative". This is the reference for the sub-menus which will be styled absolute. so all the sub-menus are styled to the left positon of the menu.
3. Reset the list items
Be sure to reset all your list items of the menu first.
/* --------------------------------------------
Resetten en instellen van de list hoofditems
--------------------------------------------- */
div.moduletable_dropdownhorizontaal ul,
div.moduletable_dropdownhorizontaal ul li,
div.moduletable_dropdownhorizontaal ul li ul,
div.moduletable_dropdownhorizontaal ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Print screen after applying CSS
4. Position main and subitems
The main items must be positioned next to each other (float: left;) and have a width of 105 pixels.
Important !
The sub-items must be positioned "absolute". In this way the sub-items are set free from the other elements. The sub-items need a relative reference point. This point is the outer <div> of the menu.
The width of the <ul> of the sub-items is 525 pixels, because the sub-menu items need to use the full width of the menu. The width of every sub-items is variable (width: auto).
/* ----------------------------------
Position main and sub items
---------------------------------- */
div.moduletable_dropdownhorizontaal ul li {
width: 105px;
float: left;
}
div.moduletable_dropdownhorizontaal ul li ul {
position: absolute;
width: 525px;
left: 0;
}
div.moduletable_dropdownhorizontaal ul li ul li {
width: auto;
}
Print screen after applying CSS
The main and sub items are positioned correctly. All the sub-menu items are on top of each other and start on the left side of the menu.
5. Style background of the main and sub-items
We have created 2 background images in Photoshop, one for the main items and one for the sub-items. The advantage for using only one image for a menu-item is that the browsers loads the image for the normal, hover and active state in one time. The display of the background of the menu items are changed by using the co-ordinates of the background position in the CSS statement.
CSS
/* -----------------------------------------------------------------
Styling the background images of the main and sub items
----------------------------------------------------------------- */
/* Normal Main items */
div.moduletable_dropdownhorizontaal ul li {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 0;
background-repeat: no-repeat;
}
/* Normaal Sub items */
div.moduletable_dropdownhorizontaal ul li ul {
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li ul li {
background: none;
}
/* Hover Main items */
div.moduletable_dropdownhorizontaal ul li:hover {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* Hover Sub items */
div.moduletable_dropdownhorizontaal ul li:hover ul {
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li:hover ul li {
background: none;
}
Print sceen after applying CSS for normal and hover effects
6. Link styles for the main and sub-items
CSS
/* --------------------------------------
Link styles for the main and sub items
----------------------------------------- */
/* Main items normal and hover */
div.moduletable_dropdownhorizontaal ul li a,
div.moduletable_dropdownhorizontaal ul li a:hover {
display: block;
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 5px 0 4px 0;
width: 105px; */ IE6 fix */
}
/* Main items active */
div.moduletable_dropdownhorizontaal ul li.active {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* Sub items normal */
div.moduletable_dropdownhorizontaal ul li ul li a {
display: block;
text-align: left;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 5px 0 4px 15px;
width: auto; */ IE 6 fix */
}
/* Sub items hover and active */
div.moduletable_dropdownhorizontaal ul li ul li a:hover,
/* div.moduletable_dropdownhorizontaal ul li ul li#current Joomla 1.5 */
div.moduletable_dropdownhorizontaal ul li ul li.current a {
display: block;
text-align: left;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: underline;
padding: 5px 0 4px 15px;
width: auto; */ IE 6 fix */
}
The style "current" is different for Joomla 1.5 (=ID) and Joomla 1.6/1.7 (=class). The CSS statement for Joomla 1.5 (#current) is commented.
Note for IE6 fix
For most browsers the CSS statements for a link "display: block and padding" will activate the whole area around the link. This will not work in IE6. To activate the whole area in IE6 you must use at least a width (and if needed a height) in combination with the display:block statement.
Print screen after applying CSS
7. Display and hide the sub-menus
CSS
/* ------------------------------
display and hide the sub menus
--------------------------------- */
div.moduletable_dropdownhorizontaal ul li ul {
left: -999em;
}
div.moduletable_dropdownhorizontaal ul li:hover ul {
left: 0;
}
Print screen after applying CSS
8. Display sub-items when main item is active
CSS
/* ------------------------------------------
Display sub items when main item is active
---------------------------------------------- */
div.moduletable_dropdownhorizontaal ul li.active ul {
left: 0;
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li.active ul li {
background: none;
}
Print screen after applying CSS
The menu seems almost finished, however when a main item is active the items on the right are hovering correctly and not to the left. The reason is that all <ul> elements of the subitems are on top of each other from the first to the last item (default). To correct this we have to reverse the z-indexes of the <ul> elements for the sub-items on hovering the main items. Note that the CSS statements for list items eith an ID or Class are different for each Joomla version.
9. Revers the z-indexes of the <ul> elements of the sub-items
/* -----------------------------------------------------
Reverse z-indexes for the subitems on hover mainitems
-------------------------------------------------------- */
/* div.moduletable_dropdownhorizontaal ul li.item581:hover ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li#item-581:hover ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li.item-581:hover ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 70;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item584 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-584 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-584 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 60;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item589 ul Joomla 1.5*/
/* div.moduletable_dropdownhorizontaal ul li:hover#item-589 ul Joomla 1.6*/
div.moduletable_dropdownhorizontaal ul li:hover.item-589 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 50;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item591 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-591 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-591 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 40;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item593 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-593 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-593 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 30;
}
10. IE6 and IE7 fix for background images
Only for IE6 and IE7 it is needed to explicitly style the background images for the main items. Note that the CSS statements for list items eith an ID are different for each Joomla version.
/* IE fix voor Joomla 1.5 */
div.moduletable_dropdownhorizontaal ul li:hover.item581,
div.moduletable_dropdownhorizontaal ul li:hover.item584,
div.moduletable_dropdownhorizontaal ul li:hover.item589,
div.moduletable_dropdownhorizontaal ul li:hover.item591,
div.moduletable_dropdownhorizontaal ul li:hover.item593 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* IE fix for Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover#item-581,
div.moduletable_dropdownhorizontaal ul li:hover#item-584,
div.moduletable_dropdownhorizontaal ul li:hover#item-589,
div.moduletable_dropdownhorizontaal ul li:hover#item-591,
div.moduletable_dropdownhorizontaal ul li:hover#item-593 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* IE fix voor Joomla 1.7/2.5 */
div.moduletable_dropdownhorizontaal ul li:hover.item-581,
div.moduletable_dropdownhorizontaal ul li:hover.item-584,
div.moduletable_dropdownhorizontaal ul li:hover.item-589,
div.moduletable_dropdownhorizontaal ul li:hover.item-591,
div.moduletable_dropdownhorizontaal ul li:hover.item-593 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}