[web-tips > horizontal menu]

A Great CSS Horizontal Drop-Down Menu



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.

However, the above is a DEMO of a horizontal drop-down menu that works:

You see, a smart guy named Peter Nederlof with help from Arnoud Berendsen, Martin Reurings, and Robert Hanson have prepared a brilliant piece of code (csshover.htc) that makes this pretty simple.

So, to make a css horizontal menu work for you, you'll need to:

  • 1. Add this css file to your site. In this example, it's in the same directory as this page;
  • 2. Add the html code shown below to your web page between the <head> tags;
	
<style type="text/css" media="screen"> @import url("menuh.css"); </style>
 
  • 3. Add the csshover.htc file to your site. In this example, it's in the same directory as this page;
  • 4. Add the html IE sniffer code shown below to your web page between the <head> tags and just before the ending </head> tag. This code has to be the last css loaded. Do not follow it with css that will overwrite these rules. Please realize that the "sniffer code" is nothing more than css rules specifically designed to make IE work correctly.
	
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
</head>
 
  • 5. If you place the code provided here ALL in the same directory, then you don't have to worry about paths. However, if you wish to move the code to other directories, such as moving the css file to a css folder (i.e., css) then you must provide a path for it, such as changing "menuh.css" to "css/menuh.css";
  • 6. 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="top_parent">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></li>
	</ul>
		
		... repeat and alter the list as needed 
	
</div> 	<!-- end the menuh-container div -->  
</div>	<!-- end the menuh div --> 
 				

The important things to realize here are:

  1. The csshover.htc code coupled with the sniffer code makes IE act as it should. If it were not for those pieces of code, IE would just sit there.
  2. This technique works for all browsers EXCEPT for IE 5.23 and below. These outdated browsers don't even recognize Microsoft's embedded commands.
  3. The position of the menu is dependant upon the "menu-container" rule in the css document. Change the top and left values and the placement of the menu will adjust accordingly.
  4. The class "top-parent" is the main menu item. If you want to include the down-arrow, you may use my gif via this.
  5. The class "parent" is the second place menu item. If you want to include the right-arrow, you may use my gif via this.
  6. The only other things you may want to change are the colors of the menu. In this example, the background is RoyalBlue and the mouse-over state is CornFlowerBlue. As such, the colors are pretty obvious to identify and change.
  7. While it may be obvious to most, you will need to change the"#" to your links and the text (i.e., Item 1) to what you want.
  8. Place the csshover.htc and the menuh.css files where your web page can find them. In this example, they are located in the same directory as this page.
  9. 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. This page works because everything is where it should be. If this doesn't work for you, or if you have problems with this technique, then I suggest that you first take this code "as-is" and move it to your site and get it to work -- it will work if you do it right. Once you get it to work, then make a copy and work with the copy in making your changes. Remember, the code has to be exact even minor changes can make significant differences in performance. So go carefully.
  10. Also, make sure that the path to the csshover.htc AND the IE sniffer code is correct in your code. Note that ALL of the comments below stating that they are having problems with the menu not working can be traced back to those two simple things not being installed properly. Please check your code thoroughly before posting "This doesn't work."
  11. 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. If you ask a question and your code does not validate, then expect my public reply to be pointed. So be warned.
  12. Please Realize that if this menu works for everything except IE, then either the path to the "csshover.htc" is not correct; or the "sniffer code" is not in the header as described; or you have either loaded an external css file or have an embedded css code such that it overwrites the IE code. Please check this before posting "This works for everything except IE."
  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...