Css Drop down Menu

[Owz2004]

Hi,

Im trying to create a three tier drop down menu which runs left to right (horizontal) as shown below and when u access the next tier it moves down in a list format and the same would apply to the third tier.



My current html for the navigation is

<div id="nav">
 <div id="left"> </div>
        
   <ul>
	<li>Home</li>
	<li>About us</li>
        <li>Occasions
					
		<ul class="1stindentul"> 
		    <li>Birthdays</li> 
		    <li>Weddings</li> 
		    <li>Birth Announcements</li> 
		    <li>Calendar Events 

			<ul class="2ndindentul">  
				  <li>Valentines</li>
				  <li>Easter</li> 
				  <li>Christmas</li>
				  <li>Halloween</li> 
			 </ul> 

		   </li>

		   <li>Prom Nights</li>
		   <li>fund Raising</li>
	         </ul>
	<li>Corporate</li>
	<li>Inspire</li>
	<li>Contact</li>
     </ul>
		
   <div id="right"> </div>
		
</div>

the css is

div#nav {background-color: #FFFFFF; width: 820px;	padding: 0 15px;	float: left; clear;}
 
div#nav #left { background: url(../img/nav_left.png) no-repeat;	width: 10px; height: 40px; float: left;}
 
div#nav #right {background: url(../img/nav_right.png) no-repeat; width: 10px; height: 40px;	float: right;}
 
div#nav ul {background-color: #392d29;	 width: 800px; height: 40px;float: left; margin: 0; padding: 0;}
 
div#nav ul li {display: inline; list-style-type: none; padding: 0; border-right: 1px solid #251f1c; border-left: 1px solid #463c39;}
 
div#nav li a {font-size: 12px; font-weight: bold; color: #FFFFFF;	float: left; padding: 11px 15px 11px 15px;}
 
div#nav ul li a:hover, div#nav ul li a.selected {background-color: #473833;}
 
div#nav ul li #left-tab {border-left: 0;}
 
div#nav ul li #right-tab {border-right: 0;}
 
div#nav ul ul{width:149px; position:absolute; bottom:-40px; left:-93px;}
 
div#nav ul ul ul{width:149px; position:absolute; bottom:-40px; left:10px; display:block;}

Am i able to achieve this affect with css?

[jonbey]

I think that you can, but I do not know how. But, I would suggest leaving it as it is. Large menus do look a bit messy, and you may find a solution that works well in one browser but not others. I have used some of Stu Nicholls' stuff in the past, but I prefer the dropline approach as it just looks neater.

Lots of code here, probably a solution somewhere: http://www.cssplay.co.uk/menus/

[jonbey]

This one may do the trick: http://www.cssplay.co.uk/menus/pro_drop9.html

[Centauri]

Arrggh - whilst Stu's illegal nested table dropdown menu works and is interesting, I wouldn't recommend it for general use. Have a read of this article.

[Owz2004]

thanks for that.. managed to implement it.. take a look

http://www.swaray.co.uk/Choc_bars_Website/index.php

[Centauri]

Doesn't work in IE6 ..... not sure why as yet (I did mention above that this system uses messy code, which makes it a bit more difficult to debug).

.nav also needs to be floated left so that the right edge image lines up.

[Owz2004]

on the home page the menu falls behind the main content banner in i.e 7 is there a way of placing it above?

I tried using the z:index on the nav div and placed it above the content banner div but no luck..

[Owz2004]

the navigation seems to work in i.e 7 on every page apart from the occasion pages... i.e birthdays.php, valentines.php

the content is also left aligned on the occasion pages but not on the others??!

Website example

I have copied the code exactly from the working pages but it does not work... arrrrghhh Im losing the will to live..

any suggestions?

[Centauri]

The #navigation div needs the z-index, plus relative position to make z-index work.

The #search div also needs a width of 418px set so that it does not drop below the logo image in FF2.

The pages that don't centre have extra space with a tab character before the doctype, dropping the page into quirks mode.

[Owz2004]

Thats great... I would of spent hours trying to figure that out... what do you mean when it goes into quirks mode?

The search div is not showing floated to the right is there something im missing ?

the right curve for the navigation is dropping below the navigation itself its currently floated to the right... when it floats to the left it just appears on the left underneath.. what am i doing wrong?

[Centauri]

what do you mean when it goes into quirks mode?

When IE either doesn't see a valid doctype, or sees something before the doctype, it goes into "quirks" mode instead of standards mode, where it tries to emulate the way the very old versions of IE rendered (incorrectly).

The search div is not showing floated to the right is there something im missing ?

Both the labels and h1 in the search area are floated left, so they push the width of the right float out - just pick a width for #search that gives the display you want (or float the labels and h1 right).

the right curve for the navigation is dropping below the navigation itself its currently floated to the right... when it floats to the left it just appears on the left underneath.. what am i doing wrong?

The .nav <ul> itself should be floated left, and needs to be a fraction wider to close the gap - I thought this was mentioned somewhere before.

[Owz2004]

Thanks very much for your help.. they are all working now.

thank you

O