Creating CSS-ONLY drop down menu

[Availor]

Have a look for "Browser Behaviour files" for IE6 ... they are mostly a workaround.

cheers

Klaus

Well originaly this menu should be working with IE6 maybe I missed something when I rdesigned the menu I will have a look into it.

[chio]

Here are some Templates with CSS-Dropdown-Menue that also work on IE6:

http://websitebaker.at/wb-templates/template-allcss2.html
http://websitebaker.at/wb-templates/template-argos1.html
http://websitebaker.at/wb-templates/template-journey.html

[kweitzel]

Have a look for "Browser Behaviour files" for IE6 ... they are mostly a workaround.

cheers

Klaus

[Availor]

Appearently it doesn't work under IE6. I did not bare it in mind since it's a css only menu. There are other menus that can be done I will try to find something out.

www.cssplay.co.uk - this link has all kinds of neat menus that can be integrated into website baker.

[mickpage]

It might be a "silly browser" but as more than 1 in 4 people use IE6 (see http://www.w3schools.com/browsers/browsers_stats.asp) it is well worth including this browser in your testing. (Equally, there are still 5% of people who don't have javascript switched on (as my workplace insists on) which makes lots of sites unusable.)

[dezu]

It doesn't work under IE 6.0.

Any ideas how to make it work under that silly browser?

Thanks.

[Availor]

You can use </li> I guess, it breaks the line... I just saw it is being used everywhere like that so I left it. No reason really I suppose it will work either way.

[BerndJM]

Hi,

just one question: why this linebreak "\n</li>"?
If it's only for better looking source code, why don't use the SM2_PRETTY flag?

Regards Bernd

[Availor]

The css

Code Select Expand


#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:25px 0 20px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:150px; font-size:10px; color: #0066FF; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#ffffff; border-bottom:1px solid #0066FF; }
#pmenu li ul li a, #pmenu li ul li a:visited { border-bottom: 1px solid #FFFFFF; }
#pmenu li:hover > a{background:#dfd7ca; color:#c00; }
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}

The menu code

Code Select Expand

<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="pmenu">'); ?>

Enjoy