Introduction - Read this first !
To create sub-menus with CSS is not easy. This is why we discuss this subject on Joomla CSS with detailed instructions and examples. All the example sub-menus are tested in IE6, 7, 8 and 9, Firefox, Opera, Safari and Google Chrome.
Types of sub-menus
The examples on the next pages are:
- Two different drop down menus
- Fly-out menu
- Click menu
- Combination menu
- Menu with images only, no link text.
Sub-menus and Internet Explorer 6
For sub-menus you often have to style a pseudo class on the list element (li:hover). Sometimes you also have to style the combination of two classes for one list element (li.class1.class2).
Internet Explorer 6 does not support both of them and the submenu will not work at all. We think it is important that the sub-menu will also work in IE6, because there are still many users with IE6 out there.
You can use a HTML Component Script ("What ever hover"), especially made for Internet Explorer, to solve these issues. You can download the script here. More information about the developer of the script you can find here.
Note
There are more solutions for styling sub-menus in IE6. The "suckerfish" (javascript) method is often used. The htc scipt however has important advantages.
- You can hover what ever you want (not only li:hover, but also ul:hover, div:hover etc.);
- The combination of more than one style (.class1.class2) is supported;
- You don't need separate CSS statements for IE6.
With the suckerfish method these are not possible.
How to install and use the script
When you have downloaded the script, you have to do the following.
- Unzip the file (csshover3.zip -> csshover3.htc and htcmime.php).
The php script will configure the server for the right mime type, which is needed for executing the htc script. - Save the unzipped files to your Joomla website.
You can save the files where ever you want, but the best way is to save these files to your template folder in a subfolder htc.
templates/<your template folder>/htc/csshover3.htc
templates/<your template folder>/htc/htcmime.php
Example: The template folder for this website is "joomla-css".
The files are then saved in the following folder:
templates/joomla-css/htc/csshover3.htc and
templates/joomla-css/htc/htcmime.php. - When the script files are saved to the location you don't have to do anything else to your Joomla installation. The only thing to activate the script are some simple code lines in your css document (template.css) of your template.
Copy and paste the code below in the top of your template.css file and change the text "templatefolder" in the name of your template folder of your website. When you have saved the files in an other folder you have to adjust the path to the files. The path is always from the root of your website.
/* =====================
What ever hover htc
====================== */
body {
behavior: url("templates/yourtemplatefolder/htc/htcmime.php?file=csshover3.htc");
}
If you use SEF urls it is possible that the relative path does not work. Choose a absolute path.
/* =====================
What ever hover htc
====================== */
body {
behavior: url("http://www.yourdomein.com/templates/yourtemplatefolder/htc/htcmime.php?file=csshover3.htc");
}
RSSThank you for your comment. Mistake is corrected.Quote