CSS menu how to

HTML & CSS
1

Hello!

I am trying to build a menu but I am new to CSS and am not getting the expected results, basically I am trying to hide the sub menus and display them on hover, it does work however the parent item is taking too much space and have not been able to figure out how to, you can see what I’m talking about here http://ury-yolotl.com/test/menu.html

The main menu items at first, when the sub menu is hidden use only the necessary width to cover the word however when hovering over it the child ul is displayed horizontally taking up much more space and forcing the parent item to use up too much space, I am trying to put the main items horizontally and the child uls vertically and also that when I hover over the items the width of the main item is not affected.

Any help is appreciated

Edit:

Okay, I have managed to put the uls in a vertical position however I am still having the problem with the width although is not as bad as it was, if someone has an idea on how I can make the parent li not expand with the child ul will be much appreciated.

2

You can increase the padding on the main navigation <a> tags and then give the child <ul> a fixed width which makes the <ul> thinner than the parent <a> and <li>, that will stop the jumping.

You dont need that Javascript that gives all the classes, just use CSS like:


#menu li { /* This will style all li's within the menu */ }
#menu ul li { /* This is a child li and will take priority over the above */ }
#menu li li a { /* This is a child anchor */ }
3

The problem is when you display the item, you’re adding a border, which is causing the shift to take place as when the item is displayed, the extra space taken by the border needs to be accounted for…a quick and easy fix would be to set a width on the ul li.

Oh, and BTW - your menu isn’t working at all in IE…I haven’t looked at it close enough to see why, but it doesn’t do anything in IE…

4

I am using the JavaScript because I am planning to have sub menus on the sub menu items like


<ul>
	<li>
		<ul>
			<li>
				<ul>
					<li>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
5

My problem with a set width is that the menu items are not necessarily going to be that short and if I set a width then not all items will have enough space or way more space than needed, the problem with IE might be because I did not add the doctype to the file

6

Here’s a nice fluid drop down menu by @Paul O’Brien: http://www.pmob.co.uk/temp/dropdown-two-level-fluid.htm

7

There’s also the technique I came up with for handling it:

Relying on CSShover3.htc for legacy IE support:
http://www.cutcodedown.com/codeExamples/menuDemo/template.html

With it’s own script that also enhances keyboard support in all browsers:
http://www.cutcodedown.com/codeExamples/menuDemo/templateWithScript.html

As with all my examples the directory is wide open for easy access to the bits and pieces:
http://www.cutcodedown.com/codeExamples/menuDemo/

Also a thread on here discussing it.
http://www.sitepoint.com/forums/showthread.php?767633-Cascading-menus-Is-this-a-new-way-of-doing-it

8

BTW, COMPLETELY broken here (Opera, large fonts/120dpi). The dropdowns don’t touch the menu so when you try to move the mouse down to them, they disappear.

9

Ah, I didn’t know that. My bad. :confused: