[web-tips > vertical menu]

A Great CSS Vertical Pop-out Menu

 

 

 

 

 

The question has been asked numerous times in the css forum, "Is a there way to create a css vertical pop-out 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 vertical pop-out menu that works:

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

  • 1. Add this css file to your site. In this example, it's in the same directory as this page;
  • 2. Add the csshover.htc file to your site. In this example, it's in the same directory as this page;
  • 3. 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";
  • 4. Add the html IE sniffer code as shown below into 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">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->
</head>
 
  • 5. Then, 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="menuv-container">
<div id="menuv">
	<ul>
		<li><a href="#" class="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>
			<li><a href="#">Sub 1:6</a></li>
		</ul>
		</li>
	</ul>
	
		... repeat and alter the list as needed 
	
</div> 	<!-- end the menuv-container div -->  
</div>	<!-- end the menuv 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. If you want to include the right-arrow, you may use my gif via this.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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."
  10. And lastly, PLEASE, this is very important. 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."

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...

Comments
mike   Monday, November 17, 2008 16:33
 
what do I need to change or add in the code for subsequent sub categories. Right now it it tiered down three times, what if I need six or more tiers?
tedd   Saturday, December 13, 2008 05:10
 
mike:

You need to look at the code and how list, sub-list, sub-sub-list, and so on are organized. The key is that each <ul></ul> tag pair contains it's own list (its <li>'s) and each item within those list can contain another <ul> tag pair containing the next sub list and so on. The method can be repeated as far down as you want.

However, the process is tricky in that you have to be very specific and very careful in organizing this -- a misplace tag can throw-off the entire set-up. It's best to start simple and then add code in baby steps.

Cheers,

tedd
Jen Lapietro   Tuesday, January 6, 2009 16:07
 
I tested the vertical pop-up menu code on my C: drive and it worked.
The only thing I couldn't figure out how to do was: get the white arrows to appear indicating there is a submenu.
tedd   Tuesday, January 6, 2009 19:19
 
Jen:

Make sure the image files are where the css rules can get to them.

In my example, I placed the image files in the same directory as the css file.

tedd
Jen Lapietro   Wednesday, January 7, 2009 08:45
 
I found the image file at: http://sperling.com/examples/menuv/nav_white.gif. It comes up as white image against a white background of my IE browser. I cannot isolate (see) the gif image to right-click on it for saving the image as a file. Thanks for your tips and assistance.
tedd   Wednesday, January 7, 2009 09:05
 
Jen:

Okay, that's just one of the things you have to consider in copying images. The images are always at the top left corner of the window -- you don't need to see them to save them. If you can't drag and drop them to your desktop, then you can save directly from your browser by choosing save. This is basic browser stuff.

Cheers,

tedd
Jen Lapietro   Wednesday, January 7, 2009 13:53
 
Basic depends upon the person. All the other user's questions were basic to me.
Judia   Monday, January 19, 2009 17:53
 
I was wondering if this code would work on individual buttons, without grouping them? Thank you!
tedd   Tuesday, January 20, 2009 07:48
 
I'm not sure what you mean. Are you talking about a single menu item that expands on mouseover? If so, then limit the parent menu items to one. That will work.

tedd
Judia   Tuesday, January 20, 2009 15:49
 
I wanted a certain amount of space between each menu button. I was wondering if that were possible with this coding. I just thought it would look nicer.
Luna Meyland   Monday, February 16, 2009 10:08
 
I am very glad with the code. In IE7 however it only worked after I put in a full doctype statement like this: .
After that it worked the same as in firefox. I found this tip on webmsterworld.com.

Luna
harish   Tuesday, February 17, 2009 06:59
 
thanks for sharing it.
it is very helpful to me in website desiging.
Barbora Fuchsova   Wednesday, March 18, 2009 05:21
 
Thank you very much, your code and css helped me a lot
Eric   Saturday, March 28, 2009 11:03
 
I really like your menu set-up but I do have a question about it. When I apply it to my personal website, the buttons become very small and tough to read. Could you tell me what to look for that would control the size or interfere with the original settings? Thank you for your help!

Eric
Eric   Saturday, March 28, 2009 11:27
 
Never mind. I found that I had an extra tag without and end tag that was messing things up. Thank you anyway.
Dan   Tuesday, April 7, 2009 16:52
 
Hi,

I've got the dynamic menus working very nicely on my site, but am running into one problem that I'm not sure how to deal with. I have a page that has embedded videos from youtube in them and the dynamic menus open up _under_ the embedded video.

I have tried the { position: absolute; z-index: -1 } on the videos and have even set the page to absolute and 1, but the video always obscures the menu.

Has anyone else seen this? Any ideas?

thanks,

Dan
doug   Sunday, May 3, 2009 18:35
 
Fantastic menu, I have been using it for a while now. Only minor problems with IE, but easy to work through. Now that IE 8 is out I am having all kinds of problems. I see that yours stills works in IE 6,7,8 and Firefox. I have tried a new doc type and and adding the x-ua microsoft qualifier. Really stuck on this one.
Bob   Wednesday, August 26, 2009 22:34
 
Thanks a lot for the fantastic work--this is a great menu. I ran into a little issue with IE 8 (not sure if the same issue occurs < IE 8). I used Netbeans to create the pages I was using with your menu which puts a comment at the top of HTML pages. It seems that a comment on the first line of the document will prevent the menu from working. As soon as the comment was removed it worked perfectly. Hopefully this tiny bit of info can help others avoid this time consuming headache.

Thanks again for the great menu,
Bob
Pelpet   Monday, December 21, 2009 03:11
 
I want this vertical menu on my page but it doesn't work...
Horizontal menu works correctly but that vertical not :-(
Please send me a code to my e-mail pelpet@hulic.cz
Thanks
tedd   Saturday, December 26, 2009 08:54
 
Pelpet:

No, I will not send to you via email what is posted and available on my site -- that's pointless and unnecessary. Just simply follow the directions and it will work.

Cheers,

tedd
Mark Young   Friday, January 15, 2010 11:58
 
I got the vertical menu to work nicely, however I find that it does not work well with frames. I have some menus that have three levels and my left frame is set to 24%. Is there a workaround?
Amanda   Sunday, January 24, 2010 12:24
 
The code works wonderfully, thanks.

I was wondering if it's possible to change the font and color of the submenus?

thanks!
doug   Saturday, June 12, 2010 17:46
 
ok, how do you get the arrow for the sub menus? I have looked at the source and don't see it?
George the Newbie   Tuesday, April 19, 2011 05:44
 
Is it possible to change the width of the submenu from the parent menu I mean the width of the submenu will be different to the width of the parent menu

"Post a Comment" has been deactivated.

I'm sorry, but there is just too much spam to review to provide answers. For example, for every honest question, there are over 1000 spams. I am leaving the comments here so that they may help others.

I find my time better spent providing more examples and attending to clients.

tedd