[web-tips > new horizontal menu]

tedd's NEW Great CSS Horizontal Drop-Down Menu

The question has been asked numerous times in the css forum, "Is a there way to create a css horizontal drop-down menu in css that will work on most browsers. Well... technically, the short answer is "No" if you are using just css, because IE is problematic in the way it handles css. M$ always has a better idea.

However, above is an example of a horizontal drop-down menu that really works! It even works with all IE (6+) browsers as well every compliant browser I know (i.e., FireFox, Safari, Opera, Mozillia, etc.) and under every OS I am aware.

You see, a smart guy named Peter Nederlof with help from Arnoud Berendsen, Martin Reurings, and Robert Hanson wrote a brilliant piece of javascript that makes this pretty simple. I've included that code with mine and created something very slick and simple for you to install and use.

So, to make this css horizontal menu work for you, follow these two simple steps:

1. Download this file to your desktop, unzip the file, read and follow the directions found in the "README" file.
2. Prepare and add your html link code to your web page. An example is shown below. Please insert your text and links as needed.

	
<div id="menuh-container">
<div id="menuh">
	<ul>
		<li><a href="#" class="grandparent">Item 1</a>
		<ul>
			<li><a href="#">Sub 1:1</a></li>
			<li><a href="#" class="parent">Sub 1:2</a>
				<ul>
				<li><a href="#">Sub 1:2:1</a></li>
				<li><a href="#">Sub 1:2:2</a></li>
				<li><a href="#">Sub 1:2:3</a></li>
				<li><a href="#">Sub 1:2:4</a></li>
				</ul>
			</li>
			<li><a href="#">Sub 1:3</a></li>
			<li><a href="#" class="parent">Sub 1:4</a>
				<ul>
				<li><a href="#">Sub 1:4:1</a></li>
				<li><a href="#">Sub 1:4:2</a></li>
				<li><a href="#">Sub 1:4:3</a></li>
				<li><a href="#">Sub 1:4:4</a></li>
				</ul>
			</li>
			<li><a href="#" class="parent">Sub 1:5</a>
				<ul>
				<li><a href="#">Sub 1:5:1</a></li>
				<li><a href="#">Sub 1:5:2</a></li>
				<li><a href="#">Sub 1:5:3</a></li>
				<li><a href="#">Sub 1:5:</a></li>
				<li><a href="#">Sub 1:5:5</a></li>
				</ul>
			</li>
		</ul>
		</li>
	</ul>
	
	<ul>	
		<li><a href="#" >Item 2</a>
	</ul>
		
		... repeat and alter the list as needed 
	
</div> 	<!-- end the menuh-container div -->  
</div>	<!-- end the menuh div --> 
 				

Some important things to consider are:

1. This technique works for all browsers EXCEPT IE 5.23 and below -- these are ancient browsers with a less than 1% following. Anyone still using those browsers are probably not worth the effort;
2. There is no "sniffer code" as there has been in previous versions. All that has been taken care of in the "tedd" directory (See the README file in the download). Please forgive my naming convention, there are reasons for it -- it makes things simple and it works. In other words, DO NOT RENAME THE "tedd" DIRECTORY;
3. The position of the menu is dependant upon the "menu-container" rule in the css document. Change the position, top and left rule values and the placement of the menu will adjust accordingly;
4. The "grandparent" and "parent" classes use arrow gifs. If you want to use your own, then create them and place them in the "tedd" directory as "menu-arrow-down.gif" and "menu-arrow.gif". If you don't want to use arrows, then comment out the css code that uses them;
5. Besides the navigational layout and textual content, the only things you may want to change are the font, font-size, menu-width and colors of the menu. In this example, the foreground is white and the background is RoyalBlue (#4169E1) for the menu "at rest" and the "mouse-over" state is CornFlowerBlue (#6495ED). As such, the menu-width (currently set at 9em), font and colors are pretty obvious and easy to identify and change.
6. If you want to change the size of the text, please use em's and not pixels. That way the menu will hold together (i.e., not break) if the user changes zoom levels. This menu is zoom cooperative. The standard conversion for px to em's is 16:1 (i.e., 16px = 1em);
7. If you want to use Images instead of text in this drop-down menu, then look elsewhere for a solution. Or better yet, check out my "Wonderful World of Includes". That demo will show you why you should not be using images for a navigational menu. But if you insist, good luck;
8. The things that you may NOT change in the css are clearly marked
   "DO NOT ALTER OR REMOVE" -- there is no reason to change any of these, so be forewarned;
9. Place the "tedd" directory where your web page can find it. In this example, it is located at the same level as this page. If you move this directory, you must change the path (i.e., href="what/tedd/menu.css" ) accordingly within the stylesheet link within the <head> tags.
10. If you have any questions as to how all of this comes together, please take the time to review the source code of this web page and compare it to your own. REALIZE that this page works because everything is where it should be. If yours doesn't work for you, or if you have problems with this technique, then I suggest you follow direction in the README file and take my code "as-is" and move it to your site -- it will work if you follow directions. The "as-is" should look/work like this -> EXAMPLE. Once you get it to work like this, then you can make a copy and work with the copy while making changes. Remember, code has to be exact and even minor changes can make significant differences in performance. So go carefully.
11. Also, if you have problems with the code and post a question here, then also post the url where you have placed the example as given in the README file. I don't mean to be rude, but if you are not willing to follow directions, then do not post your questions here;
12. For most of you this will not be a problem, but some people have posted problems with my code and asked for my advice. When I investigated, I found that they had purchased a collection of garbage code riddled with non-standard programming and tons of validation errors. Do not report problems here or ask me questions about code that does not validate. Please put your web page through the W3C validation checker before contacting me. The URL for this checker is: W3C. If you ask a question and your code does not validate, then expect my public reply to be pointed. So be warned.
13. And lastly, PLEASE, this is very important. I have taken my time to prepare this technique for you -- it will work if you follow directions. If you find this menu useful then please post your experience to this site. If you want to repay me for my efforts (remember I am usually paid for my advice) then you can pay me something for my time -- $5 would be nice. You can make payment to tedd@sperling.com via the PayPal button below.

Please donate $5 below for my development effort -- thank you.

This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.

Enjoy.

tedd...