CSS Horizontal Drop Down Menu

 

 

 

"Is there a way to create a css horizontal drop-down menu in css that will work on most browsers. 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:

Tedd Sperling prepared the CSS menu and 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 css subdirectory (css/menuh.css);
  • 2. Add the csshover.htc file to your site. In this example, it's in the css subdirectory (css/csshover.htc);
  • Please note: 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";
  • 3. Add the html IE sniffer code as shown below into your web page between the <head> tags; 
	
<!--[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]-->
 
  • 4. 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>
	</ul>
		
		... repeat and alter the list as needed 

	
</div> 	<!-- end the menuh-container div -->  
</div>	<!-- end the menuh div --> 
 

The import 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, use the gif via this link.
  5. The class "parent" is the second place menu item.
    If you want to include the right-arrow, use the gif via this link.
  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 css subdirectory (css/csshover.htc and css.menuh.css.