Problem with css in dropdown menu

Hey there

I am having a problem with a dropdown onlick menu I am making which is a customised version of Stu Nichols jQuery menu tree.

My menu can be seen here:

http://www.spiritlevel.co.uk/menu/menutree.html

(css is in the html doc)

The main problem I have is that the submenu (ul li ul) is affecting the size of it’s parent li and ul elements when it opens - ie the parent li and ul are stretching so that they contain the submenu when it opens. I don’t want this to happen, I want the size of the containing li and ul to be unaffected by the submenu when it opens.

I have tried floating (left) the submenu as I thought this would bring it out of the document flow and therefore make it’s parents unaffected by it when it opens but this hasn’t worked…

http://www.spiritlevel.co.uk/menu/menutree2.html

I am probably missing something obvious here but I have been trying to get it to work for ages with no luck - Can anyone help me out with this please?

many thanks
spirit

on Menutree 2 you have this


		
#nav li ul {
	width:120px;
	padding:5px 0px 0px 0px;
	float: left;
	}


On menutree.html css it is commented out

The submenus should be positioned absolutely, relative to the LIs that contain them.

At the moment there is dropdown happening. Have you disabled it?

So are you wanting the submenu to just open below the main menu without pushing it to the left?

this should do what you want



body {
	background: #CCC;
	font-family: Arial, Helvetica, sans-serif;
}



#nav, #nav ul {position: relative;
	padding:0; 
	margin:0; 	
	z-index: 3;
	list-style: none;

	}
	
#nav {
	margin:35px 0 0 30px;

	
}
#nav ul {
	margin:	0;
	}
	
#nav li {	

	float:left;
	position: relative;
	background:#fff;
	border-right:1px solid #CCC;
	padding: 7px 20px 5px 20px;	
	color: #767971;
	cursor: pointer;
	font-size:10px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing: 0.1em;
	
	/*opacity: 0.9;
	-moz-opacity: 0.9;
	filter: alpha(opacity=90);*/
	}
	
	
#nav li.last {
	border-right:none;
	}
	
#nav li a.active {
	color:#B21400;
	}
 
#nav li:hover {
	color:#B21400;
	text-decoration:none;
	}
	
	
		
#nav li ul {position: absolute;
	background:#fff;
		width:180px;

	top:100%;
	left:0;
	padding: 5px 0px;
	/*float: left;*/
	}
	
#nav li li {
	margin:0px;
	padding:0px 20px;
	background: #fff;
	font-size:9px;
	letter-spacing: 0.2em;
	cursor: auto;
}

#nav li ul li a {
	color: #767971;
	padding: 7px 0 4px 0;
	margin:0px;
	border-top:1px solid #CCC;
	border-right:none;
	display:block;
	width:140px;
	text-decoration:none;
}


#nav li ul li a.active {
	color:#B21400;
	}
	
#nav li ul li a:hover {
	color:#B21400;
	text-decoration:none;
	}

the only problem is, since the main boxes arent expanding when selected, you get an upside down “T” effect when the sub menu box goes under adjacent menu choices. This is an aesthetic issue and not a CSS issue. You could also solve both issues by giving the main UL a fixed width equal to the width of the sub menu box, but then you would very inflexible menu … this is a choice you have to make tho.

Thanks for the replies and help so far.

@WebDevGirl - yes - that is the difference between them. the submenu was floated left in menutree2 but the float was commented out in menutree. As the result was the same I was showing that the float made no difference.

@ralph.m - I tried adding a position:absolute; to the submenus but it made them disappear completely…

http://www.spiritlevel.co.uk/menu/menutree4.html

But based on dresden_pheonix’s post below, I think that’s probably due to some other positioning info being required (top, left)

Not quite sure what you mean about disabling the dropdown - I want the submenus to appear when the parent li is clicked and then disappear when it is clicked again or a different top level li is clicked.

@PixelsToLife - Yes. The dropdown is currently making it’s parent li stretch to the width of the dropdown when it opens and this pushes all other top level li’s to the right of the parent further to the right - I don’t want that to happen

@desden_phoenix - thank you! - that code has solved the problem!

http://www.spiritlevel.co.uk/menu/menutree3.html

The issue of the submenu going under adjacent menu choices doesn’t really bother me as the submenu li’s and the li of their parent are aligned left so it is clear which menu item the submenu relates to. I will also be adding some active states to the menu so the active parent li will be red which will also help I think.

thanks again for all your help everyone, with special thanks to dresden_phoenix for the solution.

Sorry - just wanted to add that while this solves my problem, I am not sure I completely understand why and I would like to learn from this…

dresden_phoenix - the main changes you made appear to be adding a position:absolute, top:100% and left:0 to the submenu (#nav li ul). Please can you explain why this stops the submenu affecting the size of it’s parents when it appears? - particularly as the float is still commented out in your code. Why does the position absolute make the submenu not affect the size of it’s parents? Also, while the left:0 makes sense to me (aligns it left with it’s parent I presume), please can you clarify what the top:100% is doing (as opposed to say top:0).

thanks again.

Well I really too liberties with the original code. I will explain the concepts of what I did, rather than how I changed the original code.

The float was NOT an issue… so forget it was ever there commented or not.

Position absolute, or AP takes an element out of the normal flow, which mean it essentially doesn’t take up any space, and you can place it anywhere – BASED ON the last element that has “position:relative” ( if parent has “position:relative”, it gets placed relative to the browser window.

But hat do i mean by place relative to, you might ask. Well think if this way… each time you give an element “position:relative” or RP, see that element as graph paper, when a descendant of the RP element is given AP, it doesnt affect the parents’s size and you can place it at ANY coordinate you want on the "graph paper ". So if you have an AP element with “top:10px” it will be 10px lower that the TOP EDGE of the RP element ( I hope you follow this)

To explain how this is handy for the dropdown:
By AP’ing the li ul, they stop affecting the size of the parent LI … it’s as if it wasn’t there at all… which is why it made it not expand when it was hovered on… see? The second thing is now you can put that li lu anywhere you want , relative to the parent LI’s size. since we always wanted it BELOW the LI… I used top:100% (which means, put the top edge of the LI UL at the BOTTOM edge of the parent LI)

BTW, since I did this , I took out the overflow:hidden otherwise the dropdown wouldnt show.

hope that helps you understand

Ah I see! Thank you for the excellent explanation and once again for your help. Much appreciated.