CSS Horizontal Drop-Down Menu

[web-tips > horizontal menu]

A Great CSS Horizontal Drop-Down Menu

Item 1
- Sub 1:1
- Sub 1:2
- Sub 1:3
- Sub 1:4
- Sub 1:5
  - Sub 1:5:1
  - Sub 1:5:2
  - Sub 1:5:3
  - Sub 1:5:4
  - Sub 1:5:5
- Sub 1:6

Item 2
- Sub 2:1
- Sub 2:2
  - Sub 2:2:1
  - Sub 2:2:2
- Sub 2:3
- Sub 1:4
  - Sub 2:4:1
  - Sub 2:4:2
- Sub 2:5
  - Sub 2:5:1
  - Sub 2:5:2
  - Sub 2:5:3
  - Sub 2:5:4
  - Sub 2:5:5

Item 3
- Sub 3:2
- Sub 3:3
- Sub 3:4
  - Sub 3:4:1
  - Sub 3:4:2
  - Sub 3:4:3
  - Sub 3:4:4
  - Sub 3:4:5
- Sub 3:5

Item 4
- Sub 4:1
- Sub 4:2
- Sub 4:3
- Sub 4:4
  - Sub 4:4:1
  - Sub 4:4:2
  - Sub 4:4:3
  - Sub 4:4:4
  - Sub 4:4:5
  - Sub 4:4:6
  - Sub 4:4:7
  - Sub 4:4:8
  - Sub 4:4:9

Item 5

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.

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:

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.
This technique works for all browsers EXCEPT for IE 5.23 and below. These outdated browsers don't even recognize Microsoft's embedded commands.
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.
The class "top-parent" is the main menu item. If you want to include the down-arrow, you may use my gif via this.
The class "parent" is the second place menu item. If you want to include the right-arrow, you may use my gif via this.
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.
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.
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.
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.
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."
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.
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."
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...

Comments

Les Sunday, November 23, 2008 03:06

Hi Tedd

The menu works perfect. I was wondering if it was easy to step the menu out a third level or would I need a black belt in CSS and HTML to achieve this?

tedd Monday, November 24, 2008 05:10

Hi Les:

As a former Karate instructor, I can say that the secret of most things is paying attention to detail. If you'll inspect how the nested ul tags are arranged, then you'll see how you can expand the method out to whatever menu level you want -- and do so without adding any additional css.

Cheers,

tedd

Chris Tuesday, November 25, 2008 14:45

Hmmmm, I am dumb or something. I can view your page fine, but on mine it does not work.

http://www.rubberducktech.com/build/clients/marineview/index.php#

the csshover.htc is in this directory--->

http://www.rubberducktech.com/build/clients/marineview/

tedd Tuesday, November 25, 2008 15:15

Chris:

The very first rule is to check your code against a validator -- I forgot to check yours before wading into your code.

Use: http://validator.w3.org/ and check your code.

I suggest that you fix those errors and try again.

tedd

sandeep johar Tuesday, November 25, 2008 16:32

Hello

I just set this up on my site and the initial attempt is working fine.

However, I would like to have two of these menus on a single page. When I try to do that as a second set of div's with the item list, the second one shows up as a normal list as opposed to the nice buttons that I want to see.

Any ideas? Note, I am not a css or html expert (though I get by in the latter).

Sandeep

tedd Tuesday, November 25, 2008 17:10

Sandeep:

The only problem I see is that my menu uses an ID of "menu-container" and "menuh". You cannot have two identically named ID's on the same web page in css.

So, if you change the second HTML set to "menu-container2" and "menuh2" AND add another css with that change noted, then it will work. Please note that the second css must have all "menu-container" and "menuh" id's changed to "menu-container2" and "menuh2".

tedd

Chris Tuesday, November 25, 2008 17:43

So it works in your IE 7 too?? Is there something security related that might make it not work for me?

tedd Tuesday, November 25, 2008 18:15

Chris:

I dunno -- it works for me. I tested it in Safari and IE6 (the problematic one) and it works in both.

Cheers,

tedd

sandeep johar Tuesday, November 25, 2008 18:41

Thanks Tedd

That works fine.

I am quite pleased with myself, that I actually figured it moments before seeing your note.

Just for completeness (and to be sure that I have it right), I also added menuh2 (my second container) to the little bit of code to fix IE compatibility in the head section. I simply replicated the four lines of code changed menuh menuh2 and voila.

Nice bit of code. Thanks much!!

Sandeep

Dan Wednesday, November 26, 2008 15:43

Absolutely wonderful piece of work. Thank you for passing this along.

Just wondering what type of magic would be required to get this to work in a vertical fashion? I would like to run two dynamic menus on my site... One along the top for administrative (contact, about, etc) and the other along the side for products.

any help?

thanks,

Dan

tedd Wednesday, November 26, 2008 16:10

Dan:

So you want the menu to work the same but be vertical? Have you looked at my "Great CSS Vertical Pop-out menu"? It's here:

http://sperling.com/examples/menuv/

tedd

Laraine Sunday, November 30, 2008 01:37

help- my page doesn't look like a menu bar at all- it's just has the html code visible and spread throughout the page... for one thing the "head" appears 4 times at the begining of my site & also- where exactly was I suppose to put the 2nd part - didn't see where you said.

tedd Sunday, November 30, 2008 05:10

Laraine:

I need a url to look at what you did. It sounds like: 1) your css is not being read; 2) you have too many head tags; 3) And as to where to put the first part and second part, I've been about as clear as I can. The sniffer code goes between your head tags (only two of them are required) and the other goes where ever you want a menu.

tedd

Chris Sterling Monday, December 8, 2008 21:00

I found your menu while searching for css menus and so far I am very pleased with it. There is one small problem that I am having, when you go to hover over the first menu (the one with the drop downs) it drops down correctly, but if you try to view anything other than that first drop down, it basically drops down onto itself and does not allow for any of the other links to be viewed.

I have the css included into my default css (http://justinandchris.com/Projects/bcmRefresh/includes/default.css) and the .htc file is located at (http://justinandchris.com/Projects/bcmRefresh/includes/csshover.htc)

If you have any more questions for me I will be happy to get back to you and help you.

Chris Sterling Monday, December 8, 2008 22:05

Sorry for the double post/comment, I figured out that it was a problem with other css that I had on my site. I am slowly working on recoding it and so I no longer need your help

shane Friday, December 12, 2008 04:27

I was just wondering how this menu handled select boxes in IE. Does it need a bit of javascript to cope?

tedd Saturday, December 13, 2008 05:10

Hi shane:

This menu works for all modern browsers including IE. However, for IE6, the htc code (javascript) is required.

tedd

Ted Sunday, December 14, 2008 20:58

This is a great solution! The one thing I wonder is if it is possible to also have the top parent or parent items link to a new page if you click on them? So, for example can we have everything the same as on this page, but if you click on Item 1, it will take you to the item1.html page?

Thanks,
Ted

tedd Monday, December 15, 2008 11:09

Ted:

No problem, just fill in the href="#" in the "top_parent" to whatever page you want.

tedd

Demian Holmberg Tuesday, December 16, 2008 18:36

Great tutorial, great code.

Thanks!

Demian

Web Design Mumbai Thursday, December 18, 2008 01:21

Very Nice Tutorial, it would be helpful for all.
thanks

Cre8ivemind

Ryan Monday, December 22, 2008 13:21

I tried the tutorial and got it to work and works great. Now I am wondering is there a way to get it to center up on the page? If so how. Thanks Ryan

Christopher Monday, December 22, 2008 14:20

Hi Tedd, I would like to knwo if I can get this code to work with an image for the menu bar as in the example for the site posted. The menu bar is the one that is at the top of the page and goes from dark orange to light orange. You code seems to have exactly what I need but I need to have the image as the background.

tedd Tuesday, December 23, 2008 08:13

Hi Ryan:

The menuh-container div is the container for the main menu. It allows you to control where the menu bar will placed. If you will inspect the source for this page, you will see that I've used this to position the menu bar on this page -- and I've had even said that in the documentation.

So, in your css just place the proper position, top, and left attribute values to put the menu where you want it.

tedd

tedd Tuesday, December 23, 2008 09:03

Christopher:

To prohibit spamming, I do not allow posting of links in my comments, so your link was not included in your post.

In any event, my menu will work with images -- however -- I frown on images that contain words. It's *much* better to use images for background and use text for foreground than it is to try to get that perfect typesetting.

I have a good example of what I am talking about in my "The wonderful world of 'includes' by tedd" -- please review "Web Tips".

There you will find two examples, one without using includes (using images) and one with using includes (without using images) to get the exact same affect. It's well worth the study to investigate this.

tedd

Lloyd Friday, December 26, 2008 12:51

Well, I think I've followed all the instructions, but I can't get it to work in IE. The problem may be to do with the "sniffer code", which starts with the less-than sign, exclamation mark, and two hyphens, and ends with two hyphens and a greater-than. Surely this means that the browser will ignore it, and so it has no effect? I have tried removing these start and end tags and weird stuff resulted (the founts went much smaller for a start). Either way, the menu does not drop down in IE, but it does in Firefox. Also, I tried to use HTML Centre tags to get my menu in the middle of the screen, but these had no effect wherever I tried putting them.

tedd Saturday, December 27, 2008 18:58

Well... welcome to the world of browsers -- they are different.

The sniffer code is not the problem. The start and ending declaration tags are what is needed to get IE to recognize the conditional comment while other browsers don't.

Of course, if you change the code I provided, then it won't work. I suggest that you re-read what I provided and be careful with the code. This menu does work for all modern browsers.

tedd

Shahid Tuesday, December 30, 2008 02:27

Hello. The code is wonderful. I have included it in my site (locally). I can see the menu perfectly, however, when i move my mouse over the menu, the drop down does not happen only the hover color changes.
I am using IE v6.0 with SP2. All the files downloaded from this site (css and htc and gif) are in the same directory. What shold I do now. I am a newbie...

Shahid Tuesday, December 30, 2008 07:56

I can see the dropdown of your site but i cannot of my page. I have checked the validation of html and css through W3 and both of them passed without any error.
All the files are in place as it should be. The sniffer code is also between the head tag. My IE ver is 6. What could be wrong.

Shahid Tuesday, December 30, 2008 08:29

I have also tried using the code as-is...that too doesnt work...Everything is fine but the menu does not drop down.

tedd Tuesday, December 30, 2008 08:42

Shahid:

I suggest you take my example, exactly as given on this page, and get it to work on your site. After that, then you can alter it to your liking. Understand, if my example on his page works for your browser, then it should also work on your site. The only reasons for failure are not following directions and/or paying attention to detail. For example, when you were asked to provide the url for your web site in registering for making comment, you provided the url for this page instead. That's not paying attention nor following directions.

tedd

Shahid Tuesday, December 30, 2008 09:02

I have tried your example locally, however, it does not work. I do not have a website as yet so i did not pase any link, however, I will be posting it in a free website hosting soon or i will upload it in mediafire so that you can have a look...
Thanks alot for your reply.

Shahid Tuesday, December 30, 2008 09:15

Hi,

I have copies the html file at the link below. I am using the css and htc files provided by you so i did not copy.
http://drive.123-reg.co.uk/F/8137715-301732905

Hans Thursday, January 1, 2009 11:12

i used this one and it works so good on IE, but it's meshed up when i used firefox... :(

tedd Thursday, January 1, 2009 16:09

Hans:

It works on the most recent versions of FireFox and all modern browsers. What are you using?

tedd

tedd Thursday, January 1, 2009 16:18

Shaid:

If you do not have a web site, then how can you say it's not working?

Please provide a web site showing the code not working. Do not expect me to look through all your files to find your bugs. Understand I'm trying to help, but that does not included debugging your code.

tedd

Arti Friday, January 2, 2009 05:30

When there is flash below this menu, the menu gets cut it dosen't overlap.

Please send me solution for this.

Thanks & Regards
Arti

Gaz Friday, January 2, 2009 14:10

Hello Tedd,

I have used the code and it has worked fine in IE6, Maxthon (One of latest versions) and Firefox (latest version).

The code worked perfectly in IE6 and Maxthon, however in Firefox it only shows the top_parent and parent levels of the menu but not the sub lists from those.

Any advice would be appreciated.

Sadly I can not show you a working website as I am using your method to develop a resource website for a department at the school that I work at and it is not going to have a web address of its own. It is going to be part of a VLE.

Gaz

Peg Friday, January 2, 2009 22:35

Hi Tedd,

I've been playing with your lovely menu bar and it will display beautifully by itself [menuh-test.html], but if I put that *exact* same HTML and CSS into the rest of my page [index.php], only the last two top-family menu items act like links.

I'm sure it's something really dumb, but I've been looking at it forever and can't find it.

Thanks so much for your help!
Peg

Ino Friday, January 2, 2009 22:36

:D
Thanks..

tedd Saturday, January 3, 2009 09:22

Gaz:

This menu works for all new versions of FireFox under Windows 2000 Professional, Windows Vista, and Windows XP as well as all other modern browsers. The menu has been thoroughly tested.

However, I do not know under what conditions your VLE is being run. Does it have javascript turned OFF, if so then the menu won't work because the htc file is javascript. Try checking that.

tedd

tedd Saturday, January 3, 2009 09:29

Peg:

I haven't a clue as to what went wrong. I would need to see the page that is failing. Please provide the url in the form of "sperling.com/test/" (IOW, no http).

I can say this, this menu only works when it is assembled properly and all the files and code are exactly where they should be. While this is simple, it is not an easy undertaking.

tedd

tedd Saturday, January 3, 2009 09:33

Arti:

No offense, I am not here to provide you with solutions. If you have problems with Flash or other such coding, then figure it out like the rest of us -- or -- hire me.

With that said, look into the zoom levels for this menu and your Flash.

tedd

Peg Saturday, January 3, 2009 13:25

Hi Tedd,

I'm sorry about that!

The page with just the menu and style sheet is norcalheal.cnr.berkeley.edu/menuh-test.html . The menu on this page works beautifully, as advertised. :-]

The page with the rest of my page contents is
norcalheal.crn.berkeley.edu/index.php . This page contains the exact same code and style sheet as "test," but for some reason only the last two links in the menu work.

I'm simply flommoxed....

Thanks so much!!
Peg

Peg Saturday, January 3, 2009 13:27

Yikes -- I mnisspelled the link for the second page. It should be norcalheal.CNR.berkeley.edu/index.php .

Thanks again!
Peg

Gaz Saturday, January 3, 2009 14:28

Hello Tedd, thank you for your quick reply. Currently I am just testing the site on my home computer as the site is in development and as yet not on the VLE. I have gone through the settings of Firefox and made sure Javascript is enabled. Sadly still no success past the top-parent and parent sections of the menu. Any further comments would be greatly appreciated. Gaz

Terry Cassell Sunday, January 4, 2009 05:56

Works a treat, no problems overlaying flash for me, what I really like it that it doesn't rely on javascript (apart from for ie6). I've tested in ie6,7 & 8, Firefox & Safari. There is one little imperfection which shows in Firefox & Safari, when your mouse re-visits one of the top-parent menus (like item 4 above) the hover effect only works for the top 5 or 6 pixels this doesn't apply to item 5 above.

tedd Sunday, January 4, 2009 08:37

Terry:

You're absolutely right. One of these days I plan on addressing that -- it's a hover-on-text instead of hover-on-background issue. However, it's a minor problem and most people live with it without much trouble. When I upgrade the menu, that's one of the things I'll fix.

tedd

richard taylor Monday, January 5, 2009 09:28

hi tedd, this menu is very cool and is working great for me. there is one thing i would like to change and cannot figure out: how can i make the active menu item stay highlighted (like when you mouse-over) to indicate which page someone is viewing? for example, when i'm on the home (test 1) page, i want the menu item "test 1" to be highlighted until i click on another menu item "test 3", at which point the "test 3" menu item will stay highlighted and "test 1" will no longer be highlighted. (on this page "test 2" is the only drop-down menu item). in other menus i've achieved this using the "active" tag in the css and html files.

tedd Monday, January 5, 2009 10:41

richard:

Excellent question. However, it requires extra work and understanding what's going on.

The only way for the menu to highlight what page the user is on is for the menu to know what page is current. There are several ways of doing this (i.e., use of body tag, use of active attribute, etc.). But the one I like is to allow a php script running on the server to identify the current page and change the menu accordingly. I think it's pretty simple, but I've had people who simply could not get their head around it.

In any event, you can see an example of this via my "Wonderful World of Includes" web tip, namely:

http://sperling.com /examples/include-demo/after

If you will note, the menu stays highlighted for the current page.

All the code is there ("Wonderful World of Includes") -- all you need to do is figure out how it works and apply it to your project.

tedd

Evan Monday, January 5, 2009 20:23

Hi,
This is a very cool code, I have written a php file to write the list code, and the css is an exact copy of yours, the menu operates perfectly (when you hover the mouse over the 'top_parent' the items drop down etc..) only problem is the top parents are stacked vertically and when the menu items drop down, they hide the top parents below them, obviously this is a problem, seeing as how it is supposed to be a horizontal menu; any suggestions would be helpful, I've been recoding the css for a few hours and haven't made any headway...

thanks a ton

Geds Monday, January 5, 2009 20:30

Hi,

I've tried this on my site and it works great on Safari & Firefox but not on IE. This is a pretty strict CMS so I can't add anything to the head of the site so it's in the body. Does that make a difference?

http://www.ihop.org/Publisher/Article.aspx?ID=1000042314#

Thanks,
Geds

tedd Monday, January 5, 2009 22:57

Evan:

Thanks -- I need to see an example of the problem. Please provide the url such as "sperling.com" -- and I'll have a look at it.

tedd

tedd Monday, January 5, 2009 23:08

Geds:

Yes, it does make a difference. As mentioned in the description above, there is sniffer code that is required to make IE's behave. Without it, IE resorts to the typical M$ mentality -- which is to do something other than what other browsers do because M$ may find profit in causing difficulty between OS's (my opinion).

tedd

Evan Wednesday, January 7, 2009 21:01

Hi,
I apologize for the inconvenience but as of now I am only running the web page locally, and I am unsure as to when I will have the web space made available to me. Any suggestion would be helpful and greatly appreciated

tedd Monday, January 12, 2009 07:50

If I can't see the problem, I can't fix it.

tedd

CT@ Designs Tuesday, January 13, 2009 17:21

I have not used your drop-down menu as of yet, but if I cannot get my problem fixed soon I probably will. My problem is that in IE 6&7 my drop-down for ePainBook is the only one on the site goes 2 levels deep and the first drop-down gets offset to the right and then the second level gets offset even more leaving a large gap between the parent and child. I know I will need some form of an IE hack, however after browsing the net and many many sites I have not been able to find an answer. I am hoping maybe you can at least point me in the right direction for a solution. If not I am certain I can incorporate your drop-down with ease.

Many thanks,

Charles

Sophie Monday, January 19, 2009 10:37

I was lucky enough to find your website and horizontal drop down menu after much internet searching. The menu looks great and works brilliantly in all browsers bar IE6. I have the csshover.htc file in the main directory and the behaviour link is correct. I have put the sniffer code between the header tags as suggested but it still won't hover in IE6. I just don't know what I've done wrong. If you can help I would be extremely grateful. Sophie

tedd Monday, January 19, 2009 15:49

Sophie:

The most common reason why it won't work for IE is that you still don't have the paths correct. If the browser cannot find the files, then it won't load them and thus you'll have the problem described. Please check again.

tedd

Joe Tuesday, January 20, 2009 19:23

Hi Tedd,

Thanks for making this code available - it was exactly what I was looking for!

Wonder if you could help me with a change, though. I want to use the menus to set form parameters rather than as links. I have it working except that the menu stays open after being clicked (it closes on mouseout, of course). I tried setting the parent's display style to "none", which works, but prevents the menu from re-appearing when it is clicked again.

Thanks again,
Joe

tedd Thursday, January 22, 2009 20:34

Joe:

The menu fulfills a specific purpose. Using it for other things may not be the best way to go. It might be better for you to look at html selection drop-downs. Search Google using "html selection drop-downs" -- here's an example.

tedd

Pamela Friday, January 23, 2009 01:36

Tedd,
Thank you for this code. I had the same problem as Sophie (and Shahid) ie the menus displays OK in Firefox, Opera, Safari but not IE6. However this only occurs when testing on local computer. When I upload to website the code displays as it should in IE6. (javascript problem on local computer?) Maybe Sophie is testing locally and hasn't tried uploading it yet.

Tedd, I don't want my boxes all the same size. (You have them set in your '#menuh ul' with the width parameter). I want them to expand relative to menu text length in the top menu (and to the maximum text length in each sub menu). Is this possible? And if so, what do I change to do this. I've tried a few things but end up messing everything!!

Your "tedd's slide show". on webbytedd site - do you show the code for this anywhere please?

Thanks
Pamela

William Friday, January 23, 2009 08:47

Hello and good day!

It worked in all browsers! Thank you so much...I've been trying to get a drop down to working in all browsers for 32 hours straight...my client was about to kill me. Thank you so much!

How do I change the width of the drop down only? I like the width of the parent but need to make the subs expand automatically.

Thanks!

tedd Friday, January 23, 2009 08:51

Pamela:

1. No matter where you have the code (web or local), it should work. When the code doesn't work, the problem almost always goes back to the paths not being correct. Remember, you only need the javascript "csshover" code to get the IE's to work like other browsers. This code will work with all other browsers without javascript even being turned on. That's just the price we all pay for the majority believing M$ is the solution to their computing needs.

2. If you want expandable menu boxes, then don't set a width for them -- just leave them alone (i.e., take the width out) and you'll find that they will adjust.

3. As for "tedd's slide show" on my webbytedd.com site, the code is actually there. To make it simple for you to use, get FireFox; go to my webbytedd.com site; view the source to get the html; view the javascript to get the javascript. Take that code along with your pictures (at this point name them a.jpg, b.jpg, and so on) and put it on your site. That should work after you change the url to match yours.

If you can wait a bit, I'll have a write up on this site soon -- I have a couple of other things at the moment to finish.

tedd

William Friday, January 23, 2009 09:09

I guess I spoke too quickly...client stating she cannot see drop downs..only blue menu bar in single horizontal layer.

Help please!

tedd Friday, January 23, 2009 09:43

William:

Re first post (parent static but children adjustable)

As it is now, you have a choice of fixed-width or variable-width, but not both. I know it can be done, but I don't want to wade into those waters.

Re second post (i.e., "Help it's not working -- the client sees only the menu bar").

I will bet that your client is using IE. As such, it is the age old problem of paths being correct. If you make the paths right, then this will work. For proof, have your client look at this page. I'll bet it works for her. So, review and fix your links.

tedd

Chris Gamble Sunday, January 25, 2009 17:12

Tedd,

I have started putting a new website together and have put the a test version of it at the address entered into 'your web site'.
The site will not stay there when complete.
The menu system you have given us has been used and it works wonderfully under Firefox but gets the widths if the buttons wrong under IE7 (no idea about IE6),and wraps the menu so that the last button appears under the first one and is unselectable.
Any ideas?

I have checked the CSS and the HTML using the validation services and they have been VERY useful in correcting sloppy code and cross browser problems. However, I cannot see the fault with the current problem.

Regards

Chris

tedd Sunday, January 25, 2009 17:12

Chris:

The only reason why it would wrap is that you have not provided enough room for the menu. I have clients all the time who want to put three yards of text into a two inch spot. All I can say is reduce the length of the text and try that.

tedd

Chris Gamble Monday, January 26, 2009 08:50

Tedd,

I have tried viewing the test site mentioned with another PC also using IE7 and it formats the button width correctly.... weird.
The trouble with this PC is that when the menu 'drops down' the buttons below are transparent and are difficult to see against the webpage content.
The css file and the csshover.htc are all in the same directory as the the html and the sniffer code is in the header.

Regards

Chris.

tedd Monday, January 26, 2009 08:50

Chris:

The only reason the menus would be transparent is if you made them that way -- check your css rules.

tedd

Josh Timmins Monday, January 26, 2009 16:25

Hi Tedd,

first off thanks a bunch for this :) helped alot. Spent numerous hours tryin to find one simple, and effective and this is it. 10/10 for that!

Ive hit a slight problem that ive noticed a few people have had, this is that the menu works within over browsers apart from IE. (ive only tested mine in IE7)

Here is the link to the page: http://www.merovingian-guild.co.uk/website/index.html

and this is a screenshot of the directory:
http://www.merovingian-guild.co.uk/website/help.jpg

This may help solve a problem alot of us are having. Probably something uve already metnioned and we have overlooked something.

Another problem ive got, is that as ive only started to learn CSS (im talkin like a couple of days) im not quite sure how to get rid of the left border for 'Home' but keep it for the others.

Any help is much appreciated. :)
Thanks

Josh

tedd Monday, January 26, 2009 16:25

Josh:

This was a hard one to find. Believe it or not, everything works. Your pagestye.css is causing problems. When I took that out, the menu worked.

You need to learn css.

tedd

Holli Friday, January 30, 2009 09:51

Hi Tedd,

Thanks for the info. I am having an issue with the flyouts falling behind an embedded video. I saw the z-index numbers in the CSS file and played around with those a bit (specifically making them negative), to no avail. Any suggestions?

This is extremely beginning stages but I need this portion to work before proceeding:

http://www.umsl.edu/~webdev/transfer_orientation/sperling-test.html

Thanks in advance.
Holli

tedd Friday, January 30, 2009 12:49

Holli:

As I understand things, which may be in error, the problem comes about because the Video is being kept in the foreground while the menus are placed behind.

I suggest that you give the menu a z-index greater than that of the video. That means of course, that you place the video within a div that has a z-index less than the menu's z-index. In other words, give the menu a z-index of 1000 while giving the div that contains the video a z-index of 1.

See if that works.

tedd

Holli Friday, January 30, 2009 14:07

Thanks Tedd. You are correct - the video is in the foreground. I appreciate your suggestions, and tried them with no luck. I have read two conflicting reasons for this issue. One: z-index (which makes sense to me but isn't working - not sure why I did negative...duh) or Two: wmode:transparent or opaque in the tags for the movie itself. This seems to be relevant for Flash movies and mine is not - I also don't have object tags. I may have our video guy try to render the videos with "transparent" selected if it's an option. I have a little bit of a work around by placing a static image above the video in the layout.

I will let you know if I figure anything out. Again, I really appreciate your response and suggestions.

Best,
Holli

Chris Gamble Saturday, January 31, 2009 15:12

Tedd,

Thanks for looking into my questions and I have found the problem with IE7 width is due to a 'Font Size' option in the Tools menu being set to Medium... if it is set to Smaller or Smallest then the menu width formats OK.

I think I gave an incorrect description of my other problem however and the buttons are not so much transparent as appearing to have dropped down behind the image below instead of on-top of it.

This only happens in IE7 not Firefox... any idea?

A test of the website is at http://www.classicglory.com/test/index.htm

Thanks in advance.

Chris.

Chris Wednesday, February 4, 2009 16:51

Your menu works very well. Thank you. I have one minor cosmetic issue that I cannot figure out. When hovering over the parent items, the drop down menus are offset to the right. I am trying to get them to drop straight down. Any help would be appreciated.

Chris Gamble Thursday, February 5, 2009 10:14

No need to answer my last query. Its now fixed!

I read your answer to Holli above and used the same principle on my menu. It now all displays perfectly.

Sorry to have taken your time and thanks for the code.

Regards

Chris.

Dino Thursday, February 5, 2009 14:03

If you can't get this to work in IE7, I struggled with this code for two hours to get it to work.

Finally figured out that that I had to use a doc-type at the top of the page, like

Once I did this everything worked great. Hope this helps others who may be having a problem.

John Hokanson Jr. Tuesday, February 10, 2009 05:30

Tedd,

Is there any way to keep DIV elements from overlapping?

For instance, your code works great, but I'm having severe difficulty getting it to go where I want to on the page. The menu ends up invading and overlapping another DIV element (like a quotebox). It's driving me absolutely nuts.

- John

tedd Tuesday, February 10, 2009 15:46

- John:

That's a little bit like saying "How do I keep my dogs in my back yard now that I'm using your fence?"

You use it like it's meant to be used. It does not have nor require any gapping holes nor overlapping DIV's. The first DIV, namely menuh-container, is the DIV that contains the menu (see important thing 3 above). You can move that DIV anywhere you want. It's just that you need to know how to position that DIV on your page and that is more of a css thing than having anything to do with my menu. You need to understand how css works.

Cheers,

tedd

Ken Tuesday, February 10, 2009 18:33

Does this work over the top of Flash?

Thanks for providing this CSS!

tedd Wednesday, February 11, 2009 08:55

Ken:

Everything that is shown on a web page can be governed by css. If you encapsulate (enclosed) an element within a div and provide a css z-index value, you can stack elements on top of one another and choose which one is on top. Check out css.

tedd

Petar Thursday, February 12, 2009 10:48

Hey man,

I just wanted to thank you and to praise you... You are a CSS and HTML guru :) for real.

Barry Jaques Monday, February 16, 2009 06:16

Saved my sanity Tedd. AT last it works in IE7. I have been mucking with suckerfish for days and getting nowhere.

I use HTMLPad and can instantly view the result for IE7 and FF and had the menus lined up with FF but IE7 had the menus offset 2" to the right and didn't know how to fix it for IE7. Your code worked instantly and correctly for both browsers so I can sleep easy tonight.

Just one small mystery. I pasted in the sniffer code as ordered but it is all greyed out. Not for me to mess with it but I deleted it and everything still worked so I just put it back as insurance against murphy's law.

I havent used it on the web site yet but will soon. Many thanks.

tedd Monday, February 16, 2009 10:02

Barry:

The "sniffer code" is only there for IE6 -- it's just one of those things that we all have to live with because M$ doesn't have to play by the same rules as everyone does.

The code is "greyed out" because it is located within a commented-out section of html code. Normally a commented out section of code simple means that browsers should not consider it. It's a place for us programmers to add our documentation (i.e., notes to ourselves). Fortunately, unfortunately (depending upon how you look at it) IE6 considers comments. This is just another example of not playing by the rules -- but this time we can use it to our advantage and get that horrible browser to do something that all other browsers can do without problem.

I think we would be further along on the technology highway if we didn't have M$ building speed bumps.

tedd

John Tuesday, February 17, 2009 12:13

I have had no problems getting this menu to show up on my page as it is, but I'd like to use a background-image for the top level and then a background-color for all submenus. But anytime I try to modify the css file to do so, nothing I try ever produces the desired results. What parts should I modify to achieve this? When I change the "menu at rest" portion of the code it applies the backgroung-image property to all aspects of the menu. Thanks in advance for any help.

-John

JR Peck Tuesday, February 17, 2009 13:13

I've been working on a friends wordpress theme. I've found a huge number of css dropdown examples and frameworks - but so far none as well documented. And that means I've actually been able to get it in place successfully and learn something too.

Thank you for for taking the time to put something together that is so clean and so well documented. Outstanding work and I appreciate it immensely.

Azee Tuesday, February 24, 2009 13:02

Hello Tedd! Thank you so, SO much for your generous coding, I am 85% successful with it! I came to bother you about one tiny problem: The code works beautifully in Firefox and Google Chrome. It is even manageable in IE7. The problem is that my top-level menu text is much longer than "Item 1, Item 2, etc." and thus requires bigger boxes (see ex link provided). I commented out the fixed width rule of menuh ul as you suggested, with no problems in FF/Chrome, but IE 6 just goes crazy, it can't handle adjustable menu boxes. But if I set a large fixed width so that it looks good in IE 6, the menu gets too big and overlaps on itself in FF/Chrome. Then I tried to set up an if command to read one version of the menuh code for IE 6 (width fixed), the other for FF (width adjustable), but that didn't work either. Thankfully, the dropdown actually works in all browsers I've tried thus far, so if you have any advice on this one last hurdle, the width problem, I'd really appreciate it! Thanks, AZ

Bill Thursday, March 5, 2009 16:15

Hi Tedd. I really appreciate you putting this code up. I spent many days trying to use Dreamweaver's spry menu, and could not get satisfactory results. I have the menu set up and working in IE 6 & 7, but when I tried looking at the page with Firefox the dropdowns don't work. Any cluw what I did wrong?

Nebulous Tuesday, March 10, 2009 16:11

Tedd: Thank you for this code. I like the way it wors on your page, and you are very patient with the comments, and helpful. I have no reason to think the problem I am encountering is due to anything but my own ignorance. I'm a novice. I use Dreamweaver 8 pretty well and know how to tweak code, but I can quickly run out of understanding.
I have tried very hard to follw through your instructions.

I have it working in my page (you can see it at the URL I provided with this coment). What I haven't been able to figure out is how to position the menu properly within my table. Or will it not work properly in a table? I've tried, but found it a bit of a challenge, to recreate my site entirely in CSS and DIVs, so for now I'm stuck with tables. I think you'll be able to see from the source code when I want it to be. It's just not going there. If you can help, I appreciate it.

~N

tedd Wednesday, March 11, 2009 00:00

Hi gang:

I've been a little busy lately, so I'll answer the last five posters here.

John: The parts you need to change the background portions on the menu are all within the css. Try adding a border around different rules until you understand what rule applies to what object. Then alter as you like.

JR Peck: You are welcome.

Azee: One of the things that often brothers me about clients is they want too many characters in menus. I keep saying, you can't put 100 characters in something that is only 60 character wide. IE6 is a big problem and will remain so until people switch to something else. Until such time, we all have to live with M$'s mistakes.

Bill: Without a URL, I can't say. But I can say that FireFox usually doesn't have any problems with good code -- check and recheck your code.

Nebulous: The problem you describe is typical of layouts that depend upon tables -- don't use tables. Figure out how to layout your pages using css and leave tables for only displaying data.

tedd

Francesca Dubsky Thursday, March 12, 2009 10:07

Hi - I've used this code succesfully on two websites. It works great. Now I am working on a website using Russian Cyrillic Alphabet. I'm having a problem with the coding. Can this code be used with Cyrillic alphabet? Or what do I need to do to make it work. Thanks so much for your help in this matter. This code is awesome. Francesca

nb000 Friday, March 13, 2009 05:29

Do not set the bg color to transparent,
then the menu does not work then!

David Shapiro Friday, March 13, 2009 12:56

Hello, I set up a menu with your css and htc, and it looks great. Well almost. For some reason it floated to the top of the page instead of relative to where I put in in my page. Why did it do that?

David Shapiro Friday, March 13, 2009 13:12

This web page has a picture of a tree inside of a blue sky rectangle. I have something similar with our logo. How do I line up your menu just below the log and flush left?

tedd Friday, March 13, 2009 15:43

Francesca:

What you are talking about are two completely different things.

My menu will work with any character set you can provide -- it's just text. HOW the text is shown in your browser is a different matter. Using the Russian Cyrillic Alphabet means that you have to set up your page to show that charset. Try using within the head tags and then use whatever characters you want.

Here's one reference: http://www.joelonsoftware.com/articles/Unicode.html
Here's another: http://www.alanwood.net/unicode/

tedd

tedd Sunday, March 15, 2009 08:32

David:

That's a css problem, not a problem with the menu. Learn css.

Cheers,

tedd

tedd Sunday, March 15, 2009 08:34

nb000b:

Nonsense. Transparent is the same as any other color except you can't see it but rather see the background behind it. It has no functional aspect with the working of the menu.

tedd

David Kempton Monday, March 16, 2009 21:28

The problem (test) page is at:
http://www.thesoundsmith.com/private/a_MENUtest.htm

The menu works great in FF, but in IE, the dropdowns are behind the other elements. I have added z-indexes to no avail (I had this same problem on my earlier pre-CSS design as well, the only solution I could find was to reduce the number of menu list items so they don't extend so far down the page:

http://www.thesoundsmith.com/private/cofallico.htm

is the same page in production...

Any idea ow to get z-index to work? IE even places the headlines over some items...

David Kempton Monday, March 16, 2009 21:43

I did not receive the email confirmation in a timely manner. If your response time is slow, I apologize for the impatience. But I may have mistyped my email addy, so I'm sending this as a check. If you were just slow responding, ignore this one...

tedd Tuesday, March 17, 2009 10:56

David:

I'm sorry that you did not receive a reply from me in a timely manner -- I was busy attending to paying customers. I am often taken back by people's assumptions that because I offer free advice that I should be quick about it! As my mother used to say "No good deed ever goes unpunished".

In any event, I've reviewed your code and see that while you scattered z-indexes about my menu, I don't see where you assigned z-indexs to the other elements on your page. If I had this problem, I would look there.

tedd

Robert Tuesday, March 17, 2009 16:41

I was searching for a solution to the parent - child / different width issue when I came across the simplest thing on site online, that appears to work on IE7 - viz, adding width to the html: Link 1 etc. Each drop down link can be individually adjusted to taste in erms of width.

David Kempton Wednesday, March 18, 2009 17:09

I give each submenu a class or "wnnn" where nnn is the width in pixels. Then add to the css, #menuh ul ul wnnn: {width: nnn} Just make a set for each width - w80, w120, w200, etc. and it works great (check thesoundsmith.com)

David Kempton Friday, March 20, 2009 11:22

Tedd, you were right - despite the 'rule' that no z-index sets it to zero, adding a neg z-index on the movie elements worked. (Not sure why this did not work when I first set up the pages a year ago, but that was with a different menu...) Thanks.

Kiko Wednesday, March 25, 2009 12:51

Hello,
I've recently starting to work with this code and it works great (thanks for it by the way!) on firefox, but there is a little problem on Internet Explorer... I see the dropdown menus out of place and i dont know how to fix it on the CSS. They are not appearing down the top menu, they are moved to the right, which makes it hard to reach with the mouse.

Here's the link:
http://www.fpb-designs.com/asm

Thanks
Kiko

Walt Irby Wednesday, March 25, 2009 17:20

First of all, Tedd, thank you for sharing this great code with the world and for patiently responding to all the inquiries. If you've got the time to respond to mine, it would be much appreciated.

I implemented the menu into my site, keysundaycinemaclub.com, and it looks and works great in FireFox and Safari. However, when I test it in IE 6 and 7, it appears to work fine everywhere except the 2nd list item drop down ("CITIES"). It drops down properly, but as I mouse over the 3rd item down on the drop down, the drop down just disappears.

First, I checked and re-checked all of my code against yours. Second, I attempted to tweak my CSS and HTML. Third, I double checked that the IE sniffer code and the csshover file were properly placed. None of that solved this issue.

Thank you in advance for any thoughts you can offer.

Brad Wednesday, March 25, 2009 21:27

Hi Tedd,
I am hoping this is a simple question. I am learning css for a school project and I have encountered an issue with the horizontal drop down. I know it must be related somehow to my stylesheet but I don't know where to start. I have your menu displaying just fine in Firefox however my second button dropdown is disappearing on me when I mouse over. Any ideas? What can I provide that would help?

Thanks in advance.

tedd Friday, March 27, 2009 07:34

Kiko:

I've reviewed your site and you need to understand more as to how css works. You have placed embedded css rules after the IE sniffer code which overrides it. Figure out how to place all your rules in the external style sheet and don't use embedded css.

Cheers,

tedd

tedd Friday, March 27, 2009 07:40

Brad:

In any project, school or not, you must first understand how things work to get the job done. The best way here is to use my code exactly as it is written and get it to work on your site. Remember, there is no reason whatsoever why it should not work on your site IF you have copied everything exactly.

After you do that, then make a copy and start changing the copy to see how those changes affect things. There is no substitute for hard work and at least in this project, you know it will work if you follow directions.

tedd

Brad Friday, March 27, 2009 08:45

Tedd, I appreciate the feedback. Believe me I have tried everything to see where the problem might before before I requested your help. If you could take a quick glance and point me in the right direction on why my "healthcare servcices" menu disappears after I click on it I would really appreciate it. This only happens in IE.

Walt Irby Friday, March 27, 2009 11:03

Though I cannot see Brad's site, it sounds like we're having a very similar problem: the 2nd drop-down disappears upon mouseover in IE only. For me specifically, it's list item #3 (or below) under the 2nd top parent list item that causes the problem. I run my mouse over "CITIES" and the drop down properly appears. I then mouseover "ATLANTA" and "BOCA RATON" under "CITIES" and they're fine, but when I reach "BOSTON" or below, the drop down just disappears.

Like it appears Brad has done, I too have exhausted precise copying and pasting, close scrutinizing, and checking/double checking BEFORE even coming to you, Tedd, for possible advice.

So again, any help you could provide would be much appreciated. I thank you again in advance.

tedd Saturday, March 28, 2009 09:26

Walt and Brad:

Okay, both of you say everything works except for IE -- that should give you a clue as to the problem. Somehow IE is not seeing the "sniffer code". The "sniffer code" is nothing more than a set of css rules specifically designed for IE.

Walt, I looked at your site and I see the problem. In all my directions I say "Take my example exactly "as is" and put it on your site and get it to work before you alter it" -- but you didn't do that.

The problem with your site is that while you load in the "sniffer code" to make IE's work correctly, you then load other css which over writes the rules. IE is simply following the instructions you provided.

Please read the directions I posted and follow them.

tedd

Brad Saturday, March 28, 2009 10:42

Hi Tedd,

I think I worked through my issue with the menu disappearing. Onto my next problem. What is the cause of the activex security popup everytime I load the page? It's possible that it's occuring because I am testing the pages locally instead of a webserver but I would like your input.

Thanks.

Walt Irby Saturday, March 28, 2009 12:35

Tedd,
I am truly sorry for doubting the master! You're right, I did not follow your instructions to a T when I thought I had. I moved the IE sniffer code to follow my other CSS references and now it works perfectly. I was sure it was an issue with my CSS or HTML; but I never thought about the order of my CSS (even though it's pretty explicit in your instructions). Thank you for your help, and again, thanks for an awesome code.
Rock on-
Walt

blue Monday, March 30, 2009 16:07

Hi Tedd,
Thanks so much for posting such a wonderful script!

I do have a small problem and would be very grateful if you could help me solve it. In "#menuh ul" I commented out "width:9em;" I then added some padding to the "#menuh a".

All of this works well in all browsers including IE7 with an exception of IE6. In IE6 all the menus are listed vertically instead of horizontally. Could you help me?
Many thanks!

tedd Tuesday, March 31, 2009 07:53

blue:

Yes, I could help you, but I can't unless I see the code -- and this is what I do for a living, if you get my drift.

The problem here is one of reaching critical mass -- everything was fine until you added padding and now IE6 doesn't like it. Welcome to the world of browsers.

All of this is a balancing act -- make a small change and look at it in a half a dozen browsers. Then change it more, or less, and look at it again. Keep trying until you have a solution you can live with. That's one way to find a solution.

Another way is to use a hack -- in other words, use a css rule in a special way to make one browser see something differently than another browser.

Pick out a IE6 hack and restore the padding to what it expects.

Good luck.

tedd

Gustavo Roman Tuesday, March 31, 2009 16:57

Your site does not work in IE 6.0.3790.3959 SP2 in MS Windows Server 2003. Basically the sub-menues don't show up after I put the mouse over your main menu options. What is the minimum IE version required to make your site and code work? I had problems with my test webpage and then I accessed your site http://sperling.com/examples/menuh/ and I noticed your menu was not functional. Any ideas? Thanks in advance.

tedd Wednesday, April 1, 2009 07:39

In your browser, is javascript turned on? That is required to make IE6 work.

tedd

Verhaeghe Wim Thursday, April 2, 2009 04:04

Hi

The menu works great. Thx!

I still have one problem: when building more than 3 levels, all the content comes on the screen at once, without having to go over the lower menus with the mouse.
I made an example at menu.vbop.be/index.html

When I go over 'Personeel', still OK, when I go over 'Participatie', still OK, but when I go over OCSG then it all pops out at once.

Does the menuv.css file need editing? I am not that technical but willing to try. If 'yes' Do I need to add ul ul li blocks or something like that?

Thank you in advance
Wim Verhaeghe

apb Thursday, April 2, 2009 04:32

Hi Tedd,

What a great suite of code! I'm having a similar problem as Evan and blue: my top menus are stacked vertically and the children pop up vertically (well, that is the correct behaviour for the children) obscuring the menus underneath them. Any suggestions as to what I'm doing incorrectly? Since there have been a few of us experiencing this, perhaps you can post where we are going astray.

Cheers,
Andrew

tedd Thursday, April 2, 2009 12:47

To both Verhaeghe and Andrew:

When you build a menu that complex, it really takes an effort to make sure that your tags are in the proper order and closed properly. Also, please validate your code through the W3C validator, like so:

http://validator.w3.org/check?uri=

That will do a lot to help you with all your coding.

tedd

apb Friday, April 3, 2009 03:37

Hi Tedd,

Fair enough. Page validated (and errors caught...thanks for the pointer), but the behaviour of your menu has not changed any. Any suggestions?

Cheers,
Andrew

Joel Friday, April 3, 2009 14:13

Hello my name is Joel, I would like to first off say this is some nice code and i would very much like to use this on my site. I am currently building my site with frontpage 2000. i have the menu bar working fine but i am having trouble actually adding lets say a table or text underneathe the menu. When i try to add something it actually places it either above or behind the menu bar. any ideas?

Nick Friday, April 3, 2009 14:53

Hello,

You're tutorials and advice are all great. I have a IE problem with the vertical css drop down menus. I am not sure where I went wrong, it works well in both firefox and Safari but in IE the drop down menus (on Hover) do not get initiated. Any help is appreciate. Keep up the good work.

apb Saturday, April 4, 2009 07:23

Hi Ted, Found the source of my error. What I was doing incorrectly, was lumping all top-parent menu items under one ul construct rather than each top-parent menu item having its own ul construct. A silly error on my part.

tedd Saturday, April 4, 2009 08:42

Nick:

Read the documentation.

tedd

Craig Simmons Sunday, April 5, 2009 18:08

Tedd-

Thank you for your site and the service you are providing with this code.

I have used it in my site and everything is working great on all browsers except for one thing ... my top level menu items display in vertical configuration in IE6. I got the top menu to display horizontally in IE 5 and used pages with links to substitute for the missing drop downs.

I just cannot figure out how to make the IE menu to display horizontally. The submenus and hovers all work and display properly.

Is there a simple solution that I am missing?

tedd Monday, April 6, 2009 09:03

Two things.

1. IE 5 is ancient history and the worst browser ever! Fortunately, web Statistics show it's market share is less than 1 percent -- so, why consider it?

1. As for other IE's please read what I have posted above. All the answers you need are in the documentation I posted.

tedd

Craig Simmons Tuesday, April 7, 2009 20:37

Placed the fixed width back in "menu ul" and everything worked fine.
This is a very good menu. Works fine in Firefox, Safari, IE7 & IE6, and it even works fine in your favorite browser IE5 (we have IE5 users visiting some web sites).

The dropdown doesn't work in 5, but by linking the top parent to a page with links to the submenu pages, the site is usable.

Thank you, Tedd.

ZGamer Tuesday, April 7, 2009 23:19

Tested with my install of IE7 on vista and the submenu's fail to appear in the correct position. Prior to adjusting the width from 9em to 10.5em (longer text in menu) the problem was still present. To work-around this sub-menu alignment error in the "if lt IE 7" code add a line for

#nav ul ul{margin:-1em 0 0 -6.2em;}

tedd Wednesday, April 8, 2009 09:44

ZGamer:

Does my menu on my site work for IE7 when you view it? If so, then this menu works for IE7. To get it to work right for you, you need to repeat what I've done here on your site. Once you have it working, then you can alter it as you want, but you need to get it working first. Remember, there is no reason whatsoever why this menu will not work for you other than you are not following the directions posted here.

tedd

ZGamer Thursday, April 9, 2009 12:19

The problem with another css file being called which was cancelling out the effect which was the source of the problem. The reason adding the "ul ul" on the "if lt IE 7" worked was because that code was the last css re-assignment applied which in effect cancelled out the changes made by a conflicting css file. I have since adjusted the other css file as to not conflict and the menu is appearing as it should.

FOOFIGHTER Wednesday, April 15, 2009 15:06

Thx for the code, it all seems to be working correctly. Working on a new homepage and it is a Fixed width design. Is there a way to make the menu move with the page when you drag your browser window to a smaller size? Any tips greatly appreciated, Thx FOOFIGHTER . . .

Fenton Queue Thursday, April 16, 2009 07:22

Interesting code, and it worked fine in Firefox. The dropdowns worked fine in IE too, but... my existing CSS formatting was completely destroyed. Pity. Back to the drawing board eh?

tedd Thursday, April 16, 2009 17:07

FOOFIGHTER:

If you installed the menu correctly, it will move with the browser window. However, it does have a minimum size where it will not wrap and hold the page to that size.

Without seeing the url, I can't tell you more than that.

tedd

raku Monday, April 20, 2009 07:10

I have a problem in IE, i did the steps, but IE sniffer last one, and stuff, but still doesnt work, can u check the site and say what can be the problem ?

tedd Monday, April 20, 2009 10:35

I am absolutely certain if you followed my instructions my example would work for you. I suspect the problem is that you did something wrong and now you want someone else to fix it while claiming that you followed instructions.

So, here's what I'll do -- you pay me up-front for my time and I'll look at your site. If I find the problem is that you didn't follow directions, then I'll keep the payment and tell you want to do to fix it.

If, on the other hand, you have found something that I overlooked and the problem wasn't you following instructions, then I refund your money. If that is acceptable to you, then make payment of $50 to tedd@sperling.com via PayPal.

tedd

tedd Monday, April 20, 2009 10:44

Fenton:

That should not happen unless the id's and classes are the same.

You must understand css to use css. The addition of another style sheet will NOT do anything to the existing style sheet unless there are conflicting id's and classes. If so, then change them to something else. That's elementary css.

tedd

jgk Monday, April 20, 2009 13:48

ted, I need help getting my dropdown to work properly in IE6. It works fine in all other browsers. The problem occurs when I hover over a Sub Menu that is on top of what ever is below the menu(in my case a picture) In other words there is some space between the menu and the picture below it. The menu works fine when I hover over the first sub menu because there is that space there. When I got to hover over the second element the menu disappears. I've tried playing with the z-index of the ul, the divs, and the picture but nothing changed. I know that this is the problem because I moved the picture down a few hundred pixels and the menu worked fine with all of the space between.
-Joe

Travis Kirsch Monday, April 20, 2009 21:37

Tedd, your menu looks pretty slick and I would like to try it out but before I do, I need to find out if it will work on a menu I already have built. See the URL I provided (visitamarillotx.com). I already have a graphical menu built which has a specific brand that can't be changed. It has javascript mouseOver effects on the top-level buttons. I want a new drop-down sub-menu that works well across platforms and browsers, like yours. The js sub-menu I have now does not work very well in MAC browsers. It has a huge space between the main button and the sub-menu. Will I be able to integrate your sub-menu system into my already existing graphical menu? If you already answered this... sorry, I don't have time to read through all these posts.

tedd Tuesday, April 21, 2009 09:36

Travis:

Please don't take this the wrong way, but you can't find the time to investigate something that is being offered for free -- yet you want me to spend my time to do your research for you -- is that it?

I've taken my time to put up this example that will work PROVIDED that you take your time to read what I've posted. It's that plain and simple. If you want to hire me to make it work on your site, then I am open to that as well. My minimum charge is one hour of my time at $50.

When I receive $50 from you via tedd@sperling at PayPal, then I'll drop what I am doing and research this for you. Otherwise, please take the time to read what I've posted.

tedd

dEXtErn1ty Wednesday, April 22, 2009 07:51

Hi there,

thank you very much for your work tedd, your code rox !

For those who have a display problem in IE7, check your doctype tag at the begginning of your HTML page...
I nearly got mad because the menu was working with Fx 3 but not with IE 7. I finally found the explanation : my HTML editor put a "HTML 4.01 Transitional" doctype tag by default, if you remove the transitional it works perfectly... To be sure just copy the doctype used for this page.
Maybe you should put a note about that in your tutorial.

See you around.

Absolute Domains Wednesday, April 22, 2009 17:02

Nice code will see how it works when it get home.

Sean Thursday, April 23, 2009 11:13

Hello, I just added this to a site I'm working on earlier this week. At first everything worked fine, but now the menu is completely broke. I'm not really sure where I went wrong. The site I'm working on is http://sean.xancomp.com/gateway/index.php.
Thank you.

tedd Thursday, April 23, 2009 14:55

Sean:

Your page can not access the style sheet. See here:

http://sean.xancomp.com/gateway/menuh.css

When you can fix that, it should work.

Cheers,

tedd

Khalid Friday, April 24, 2009 14:30

Hi There!

Thanks so much for your help. The CSS code provided is really clean and easy to figure out. One question though... I deleted the width for #menuh ul and added a small left and right padding to #menh a. This works fine in Firefox, Safari and Chrome but not in IE. God I hate IE. LOL.

Khalid Friday, April 24, 2009 14:49

Nevermind! I found somebody who already posted the answer to my question. I just gave the sub menus a style width and we're all fine and dandy.

Thanks people!

FermZ Monday, April 27, 2009 08:31

thanks a lot i learn something new....

Michael Wednesday, May 6, 2009 10:35

Don't we all just love to hate IE! I had an issue similar to Holli back in January. In my case it was a javascript slideshow. In IE (5.5-7) the menus dropped down behind the slideshow. The only way to get the drop downs in front of the slideshow in IE was to set a neg z-index on the slideshow. That however, made the slideshow disappear in every other browser. Sooo.. put a div with the neg z-index around the slideshow hidden from other browsers with a conditional comment. Now they're all happily displaying! Also, in EI of course! the font sizes of both the menu headers and drop downs displayed way too small and nothing I did to the style sheet had any affect. So I added some conditional comments to the html to force IE to bump up the font size. I dislike resorting to conditional comments, but they're not always ugly hacks.

Thanks for the nice script.

Juan Carlos Rojas Thursday, May 7, 2009 15:42

Nice!

Dave Wednesday, May 20, 2009 12:51

Great piece of code! Works perfectly on my website! Kudos!

Colin Gray Friday, May 22, 2009 09:37

Hi,
Great stuff, thanks! May I suggest that you add to your 'Important things to realise' section that if it's working in Firefox and not in IE that DOCTYPE might be the reason.

Best Wishes
Colin

Cam Lillico Thursday, May 28, 2009 06:55

Hi,

Thanks for the piece of code. I just have one concern, that is that the text in the menu columns is spilling out. I don't want to extend the boxes so that some hang out. I just want the text to "return" to the line below so it only increases the height of the box.

Thanks,

Cam

Cam Lillico Thursday, May 28, 2009 08:34

One more thing. I tried using and that works - but I'd rather not if you know another way for the text to stay within the box

Cam Lillico Thursday, May 28, 2009 08:36

"tried using [line breaks] and that works..." - sorry shouldn't have typed in the tag.

Mark Young Friday, May 29, 2009 16:30

I have spent that past few days trying to locate information on horizontal menus and your site is the only one that was understandable and easy to use.

I have created a new index file for our website, but am running into a couple issues. (I have not had to time to go through all posts and there is probably some that would help my problem.) So to get down to it, I will ask.

How can I get the menu to handle different screen resolutions? It looks fine under 1024x768, but 800x600 the menus get cut-off.

Also, because I want to use the menus as part of the main index.htm file, I want to place the district logo above and some pictures below. I was able to get it done by placing a table above and below, but it acts kind of funky. The only way I could get the pictures at the bottom to be spaced away from the menu was to put some blank cells at the top of the table, but I know there is a better way.

If you could peruse my page and give some feed back, I would appreciate it. (http://www.santaritaschools.org/newindex2.htm)

Thank you

Lucy Friday, June 5, 2009 13:18

I can't get this to work in IE. I've read everything about it and made sure that the sniffer code and csshover.htc are all there, but I still can't get it to work in IE. I've even checked the source code and there's no css after the sniffer code, but it's still isn't working. I'm sure I'm doing something wrong, but do not know what it is. I've been trying for two weeks to get this working in IE.

david stranack Sunday, June 7, 2009 17:30

Hi Tedd,

Great example menu thank you very much but may I ask?

I have applied a current class so that the current page (parent dropdown)is highlighted BUT it is knocking the drop downs below out? Can you help me please?

Jen Friday, June 12, 2009 08:13

Tedd,
Thanks for the great code! It works great for me, but I'd like to have the dropdown menu type a little smaller than the main menu. Is there a way to do that? I've tried messing with the CSS, but can't figure out which style to change, or if I this is even possible. My practice menu is available here:

http://firelilyphotography.com/practice/home.php#

and what I'd like it to look like (but work in IE and Safari without the ?? boxes), is here:

http://www.firelilyphotography.com/clarkstreet

Thanks so much for your help!

~Jen

Jen Friday, June 12, 2009 08:46

Tedd,
Of course I just had to bother you with a post, and then I was able to figure it out! Thanks again for the awesome tutorial!

~Jen

tedd Saturday, June 13, 2009 07:54

Jen:

Try this -- set the font size to what you want the drop down menu items to be in menuh (i.e., font-size: 12px) and then add another rule (i.e., font-size: 16px) to make the top_parent class to have a larger font.

However, I have not checked this out with all browsers.

tedd

infra Tuesday, June 16, 2009 21:15

The best simple menu for my opinion, keep up the good work!

shawn Thursday, June 18, 2009 22:52

Tedd, i would like to replace the top parent and parent background image with my own image instead of the blue one but when i changed it the mouse over effect does not working. can you tell me how to solve this? thanks -Shawn

Amber Friday, June 19, 2009 07:54

Hi Tedd --

First of all, THANK YOU! I am a complete amateur and have about 2 days experience using CSS. I followed your directions and the menu of my website (currently awaiting upload) works perfectly in all browsers.

Question: Is there a way to be able to take the html of the menu and put it in an external css file? This way, changes for all pages' menus could be made in one place.

Thanks again!
Amber

tedd Friday, June 19, 2009 17:28

Amber:

Look no further than this:

http://sperling.com/exampl es/include-demo

While technically you are not taking the html and placing it in a css file, you have the general concept right. The above link, if followed, will give you a leg up on all other web developers that have not discovered how to use includes. Like I say in the write-up, this will change the way you program for the rest of your life -- it's that important.

Good luck,

tedd

tedd Friday, June 19, 2009 17:43

-Shawn:

What you are looking for is called "image replacement". There are some examples at webbytedd.com -- that's one of my web development sites.

I do know that it is complicated trying to incorporate image replacement within this drop-down menu -- it's difficult. I strongly suggest that you study this example: include demo before attempting it. That demo will show you why you shouldn't.

Cheers,

tedd

David Cutri Sunday, June 21, 2009 01:39

Terry said, "Works a treat, no problems overlaying flash for me, what I really like it that it doesn't rely on JavaScript (apart from for ie6). I've tested in ie6,7 & 8, Firefox & Safari. There is one little imperfection which shows in Firefox & Safari, when your mouse re-visits one of the top-parent menus (like item 4 above) the hover effect only works for the top 5 or 6 pixels this doesn't apply to item 5 above."

Ted said, "Terry: You're absolutely right. One of these days I plan on addressing that -- it's a hover-on-text instead of hover-on-background issue. However, it's a minor problem and most people live with it without much trouble. When I upgrade the menu, that's one of the things I'll fix."

tedd

---------------------------------------------------------

Hello, tedd

I am having that very problem, but in my case it's a big deal because it interferes with the style I want (different color text on hover and a horizontal second tier). It seems like it would be a big deal either way, but I'm just wondering if you ever got around to fixing that. If not, maybe you could just point me in the right direction? It's actually working great in IE8 and Opera9, but not in FF3 or Safari3. Why is it that your example above doesn't have this problem?

David Cutri Sunday, June 21, 2009 14:20

tedd

i figured it out--it was simply a matter of margins and padding around my second level list--don't know why i had those in there, but it was quite a riddle for a whole day--i'm glad i figured it out before you could waste your time looking at my code.

Thanks for the free code. It's excellent! Son of Suckerfish simply WOULD NOT BEND to my wishes, but your code saved my weekend. I've spent waaay too much time on that nav bar, if you know what I mean. Thanks again, and I will definitely be back for more stuff!

sebastiano Tuesday, June 23, 2009 11:35

Hi,
I found this menu very simple and straightforward. However, the dropdown part doesn\'t work in IE7, even with the correction inserted just before tag.

Here\'s my link, a site running WP 2.8 (http://www.lagazzaladrabijoux.com/)

Firefox, Chrome, Opera, Safari displays it perfectly. Only the buggy IE has problems.

Last thing: the top_parent doesn\'t keep the hover state (I mean, inverted background and text color) if I point mouse over a child. Is it normal?

Craig Simmons Tuesday, June 23, 2009 12:41

Hi-

My submenus get hidden depending on the size of the browser window on the right side. Is there any way around this?

http://test.angusJournal.com/library

Great menu. Used in a couple of different sites, by the way.

Klara Tuesday, June 23, 2009 17:19

Hello Tedd,

First of all, I'd like to thank you for sharing such a nice tutorial (written in plain-English) and answering questions.

I do feel rather dense on one issue though and I know it's an error on my part. My menu runs vertically as opposed to horizontally on both IE8 and FireFox and I'm at a loss as to why. I have read through the tutorial several times, have validated my code, have all the files in one directory and copied the sniffer from others' working sites. I do hate to be a bother, but if you could perhaps tell me what aspect of the code makes the ul-list run horizontally, then at least I'd know where to aim my troubleshooting? Or if anyone else on here has had the problem and fixed it, I'd be most grateful to hear your suggestions.

Thank you kindly,
Klara

Russell Tuesday, June 23, 2009 19:28

It DOES NOT work in IE 7 !!!

tedd Wednesday, June 24, 2009 07:09

Russell:

Nonsense.

I just tried it in IE 7 and it works for me as well as every other poster here since IE 7 came out.

tedd

tedd Wednesday, June 24, 2009 10:07

Klara:

I'm not going to be answering questions on this menu since I rewrote it. Please look to my new drop-down menu here.

Cheers,

tedd

Xylude Wednesday, July 8, 2009 10:14

I noticed in the menuh.css that if you comment out the width it works ok in firefox but not explorer (the widths are all different on the drop down menus). Also I had trouble changing the hover and bg colors of the drop downs without changing the ones at the top that had no drop downs. Here is the fix I made for it:

#menuh a.drop
{
background-color:#8CB094;
color: #2D5C3D;
width:150px;
}
#menuh a.drop:hover
{
background-color:#C7DCC9;
color: #2D5C3D;
}

I added those to the bottom and then set the class to each individual box in the drop menu to "drop". You can even copy and paste it again into your css file and rename it to control the width/bg colors of two drop downs seperately. Once you have that in your css just set the class of the link to "drop" like so:

Link

I am not that good at describing this but if you have width issues in explorer I am willing to help. Just email me at xylude@gmail.com and I will do my best :)

tedd Friday, July 10, 2009 09:56

Xylude:

As with all things, you can add additional functionality with additional code. Change as you may.

As for the menu widths being different sizes in IE, if you comment out the width declaration, that's just the way IE works -- some people want it to work that way.

Cheers,

tedd

georges Thursday, July 16, 2009 08:34

Hi tedd, first of all thanks for this wonderful code, you really are a genius !

Still, this menuh has a big drawback : ACCESSIBILITY. I tried to adapt it for keyboard-only users and found a weird problem (valid html & css, in ff 3.0.11 linux and ie8, safari, opera, ff3 & chrome in win xp sp2).

I added the :focus pseudo-thingie at the end of the css (my menu has only one level):

#menuh li:hover ul ul, #menuh li:focus ul ul
{ display: none; }
#menuh li:hover ul, #menuh li:focus ul
{ display: block; }

I also added :focus wherever needed (wherever there's a :hover). With the tab key, each of the top links "activates" normally and is clickable (with enter, even js), but the menu doesn't drop-down below... The mouse works perfectely on all platforms, but all these browsers return the same behavior with the keyboard.
Did I miss something ? Any clue ?

Thanks in advance, cheers!
ps : I just saw there's a new version, which apparently has the same flaw...

Niklas Waller Sunday, July 19, 2009 02:39

Hi,
I would like the menu to be put where I put it. Making it 'relative' on 'menuh-container' instead of 'absolute' causes it to do so in vertical. However it won't behave like that in horizontal since it is still stuck to the left but should be centered.

I can specify the left attribute like you suggest but in this way it will still look differently for different resolutions.

I want to center the content of my site both in vertical and horizontal. Would you say that it is possible to do so with this solution so that it looks pretty much the same independent on which resolution you are using?

Thanks / Niklas

Fred Peres Monday, July 20, 2009 09:59

Question: is it possible do align the submenu items in horizontal?

tedd Sunday, July 26, 2009 09:54

To all:

If you will read my post on June 24, you will see that I am no longer answering questions regarding this menu. I have provided a newer and better menu -- see web tips.

Thank you,

tedd

Onur SELAMET Tuesday, August 18, 2009 17:11

First of all,thanks for this clean and useful code.

In my scenario top_parent elements have less width than sub elements so I made a litte modification and I want to share it who has same issue;

in css file;
||add new||
#menuh ul.root, #menuh ul.root:hover
{
width: 150px;
}
||find and set width attribute which applies to subitems||
#menuh ul
{
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 300px;
}
/*sample*/

ShortText

very long sub item text1
Sub 2

Products

Product 1
Product 2

Carlos Tuesday, August 18, 2009 22:47

Hi, I dont have words to thank you, that's an excellent code, don't forget to include the DTD. En español: Es un excelente menú horizontal y fácil de implementar, muchas gracias!!

James Barnett Saturday, September 5, 2009 09:14

Just tried out your example and it works perfectly - very nice. Will probably implement this on my own page! Easy to use and very straight-forward, thanks!

SocialAdr Saturday, September 12, 2009 14:59

Brilliant script!

Exactly what I was looking for...a simple drop-down menu without anything crazy or with a big footprint like javascript and flash. And must work on the majority of browsers.

You sir, are awesome at life.

Seo Stan Thursday, September 17, 2009 15:22

Excellent stuff. It tested flawless on my local apache server and I will soon use it on one of my live sites.
Cheers.

Tom Wednesday, September 23, 2009 15:55

Hi Ted
As so many other people have written, I have problems with the page, I've done, when it comes to seeing it in IE.
I'm guessing, your reply will be, that I should look at my CSS or my paths, but I've been doing that, and trying different things without luck. My munuh.css file is inside a folder called _css, and the csshover.htc file is in the main root folder. I placed the sniffer code, as you described, but it doesn't work. Hope, you can help me.

Newt Monday, September 28, 2009 18:00

I found you site looking for code to get my site functioning better. I am brand new to this and was wondering if you could in in touch with better details on installing this code. For instance do i need to make files for the two above codes or install it into the template (im using wordpress). Thank you.

tedd Tuesday, September 29, 2009 13:26

Newt:

I'm not sure what you are asking. The only installation here is simply to upload the files to your website. After you get the files working, then change them as you want. Wordpress doesn't have anything to do with this.

Cheers,

tedd

Newt Tuesday, September 29, 2009 19:56

I'm sorry for the miss understanding here is a better explanation. I use Wordpress. The Wordpress system uses templates. Your instructions say upload the "files to my site. What I wanted to know is whether i need to upload these to my file structure as independent files or go thru my templates and insert the code thru out the css files.

tedd Wednesday, September 30, 2009 09:47

Hi Newt:

I don't know, I don't use Wordpress. I say upload my files to your web site and use them as I have directed. If you can do that and also use Wordpress, then that's great. But I offer no advice as to how to incorporate my drop-down menus in an application I don't use. It could be simple or difficult -- I don't know. If you have a question about the menu I offer, then I'll answer that as best as I can, but how to use it in another application I can't comment.

Cheers,

tedd

Bob Tuesday, October 6, 2009 12:17

When defining no width in #menuh ul and adding padding in #menuh a the sub menus in firefox are the same width, but in IE7 they are not. How do I correct this?

mstrex Wednesday, October 14, 2009 00:34

How to remove double borders and center menu on the site?

tedd Wednesday, October 14, 2009 07:12

Bob and mstrex:

These are a css problems and not a problem with the menu. Please learn css.

Cheers,

tedd

Michael Thursday, October 15, 2009 15:18

Thanks Tedd, this is exactly the kind of menu I was hoping to find.

SEP Thursday, October 22, 2009 20:57

Because of the HTML 4.01 Strict specification, browsers are ignoring my presentation markup. With Traditional specification, the menu works in some browsers and not others. I'd like to add the menu to an existing html site, I don't want to have to rebuild the entire site in CSS.

Any suggestions?

Jay Smith Friday, October 30, 2009 07:20

How do change the background color for the link that I'm currently on? For example if I click on the item 2 link and go to the item 2 page. The background color for the item 2 menu should be a different color. Is this possible.

B Long Friday, October 30, 2009 16:31

This is great code and mine works perfectly only its vertical instead of horizontal. Any ideas why? Thanks Brandi

tedd Saturday, October 31, 2009 07:33

SEP:

1. If you're going to work on the web doing web sites, learn css.

2. My menu works with good code, so validate,

tedd

tedd Saturday, October 31, 2009 07:33

Jay:

Yes, it is possible.

Here's an example that I did:

http://sperling.com/clients/beckyscan/services-gifts.php

Note that both menus retain their page position.

To do this, try using this:

http://sperling.com/examples/smart-menu/

Cheers,

tedd

tedd Monday, November 2, 2009 10:01

Brandi:

While this may be obvious, please review your code -- you have done something wrong.

Cheers,

tedd

hrishikesh Tuesday, November 3, 2009 00:56

Dear All,

Please post a sniffer code compatible for all browsers.
e.g. IE 6, IE 7, Google Chrome, Firefox etc.

Regards,
hrishikesh

tedd Thursday, November 5, 2009 07:29

hrishikesh:

A sniffer code?

Sure, if I wanted to step back to circa 2000 -- that's a poor solution. The solution is to learn css and how to use it.

You might want sniffer code for the assortment of hand-held devices out there because many of those are not compliant. But there's no need for sniffer code for today's browsers.

tedd

hrishikesh Sunday, November 8, 2009 21:54

Dear TEDD,

Thanks for your previous reply.

I used your code. I am using horizontal menu bar.
But i am not getting dropdown menus to the parent menus.
When i go through csshover.htc file in my application the visual studio is showing errors to the code.
g

hrishikesh Monday, November 9, 2009 05:09

How to include csshover.htc in a html page
Is it like this way?

Please guide

hrishikesh

tedd Monday, November 9, 2009 10:15

hrishikesh:

I cannot tell you more than what I have said in the documentation.

Please read it.

Cheers,

tedd

Yuko Monday, November 23, 2009 09:54

When I change the width for #menuh ul to auto instead of fix width, IE 6 place the menu vertically. I saw your suggestion for similar question (from Blue on March 30, 2009) and I removed the padding from #menuh a but it did not fix the problem. Any suggestions? Thanks in advance.
Yuko

Yuko Monday, November 23, 2009 14:57

Tedd,

I managed to fix the problem.
I added
#menuh ul {width: 109px;}
in your sniffer code

Yuko

tedd Tuesday, November 24, 2009 09:10

Yuko:

What you propose is NOT a "fix". It is just something that makes your version work the way you want it for your browser/os combination. You will probably find that your fix is not universal and others wills see your work differently.

As I explained to you privately, I suggested that you use a center alignment for your menu, but you chose a different route and now you posted your "solution" as if it's a fix -- it is not a FIX.

Good luck,

tedd

Rajiv Monday, November 30, 2009 00:31

Hi, I followed exact as u stated. However I am not able to get the drop dowm and the arrows as seen above. So I tried to copy code from view source of this page and the same problem. I m using WinXP and tried with firefox 3.2 as well as IE 6. I know m doing something wrong. If I have made a folder(Menu) and stored menuh.css and csshover.htc and menu.htm in it. It should work as you suggest right.

Rajiv Monday, November 30, 2009 01:56

Ok the code work fine on Firefox but problem with IE 6. I tried going over the validater you suggested, its great for a struggler like me. At home it runs on my IE 7. Hope its nothing to do with the active script blocker.
The only thing is that the White Arrows dont appear, any suggestion or possible reasons.

Rajiv Monday, November 30, 2009 06:01

Hi, I found out about the Arrow, its a gif file that is referenced in parent hover, but was not in the downloaded files.

tedd Monday, November 30, 2009 11:39

Rajiv:

It's clear that you didn't read the documentation.

The arrows are provided in the documentation with the following link:

http://sperling.com/examples/menuh/arrows.php

You must understand that I take my time to place all the documentation you need on my site, I give you instructions as to how to use it, and I still have people failing to read telling me that I forgot something. Sometimes I think it's not worth the effort to try to help others.

tedd

Beth Tuesday, December 1, 2009 17:56

Hello,
First, we all appreciate your time. Just a few bad apples can leave a bad taste, unless you let it ferment then you can have a happy day! :)

The code works for both IE and Firefox and displays the top bar, however, the dropdowns appear to be working however are not rendering fully. I had thought it was the images in the css, so set them to background but that did not solve the problem

Can you please assist with this problem?

Thanks,
Beth

tedd Wednesday, December 2, 2009 09:59

Beth:

What problem? You have not even identified the problem you are experiencing. In addition, is my menu on my site here working in IE and FireFox? If so, then the process works and the problem you are having is that you simply have not followed directions.

Ask yourself this, why is it that over one thousand people have installed this menu without any problems and you are having difficulty? Could it be that you missed something that is obvious to others?

Please re-read the directions and follow them exactly. If you have followed my directions exactly, then show me where you installed my menu "as-is" on your site and we'll proceed from there.

tedd

Beth Wednesday, December 2, 2009 10:29

Hi Ted,
I thought I had identified the problem - sorry. As indicated, I have the menu working but the drop downs are not displaying because of the css. If you visit the site, you will see the situation. In Firefox AND IE the menu does appear and the drop downs DO work if I set the font to small, but only some of the dropdowns are displayed. I am sorry if you feel that I didn't follow your directions, but I did - to a T, so, please see the site. There isn't anyway for me to include a screen shot, so the closest is to check out the site. I HAVE INSTALLED THE NEW MENU as well and am experiencing the same problem

Beth

lloyd Wednesday, December 2, 2009 10:40

My first search for css drop down menu info and really glad it came up with this page. I haven't even tried it yet but the 'this is good info' alarm went off after just a couple minutes of reading.

I appreciate your attitude and comments. I do have a web work site just starting at http://foothillsweb.ca growing by a page a week, and will be linking back to your site just out of gratitude, and of course for useful information.

I'm surprised you don't have a way to earn on this page (unless I missed it?). It seems to be a sad fact that the worst pages on the web are often the best earning pages. People wind up frustrated that they can't find what they want and click on anything looking for more information. A page with great information just leaves the person happy s/he found what was needed, and then on to the next thing to get done.

best wishes, lloyd
.......__o
.......\

tedd Thursday, December 3, 2009 09:15

Beth:

This is an example of you following directions. I said:

Please re-read the directions and follow them exactly. If you have followed my directions exactly, then show me where you installed my menu "as-is" on your site and we'll proceed from there.

Now you reply with no mention of where you installed my menu. Do you not understand what you read? Please my time is valuable, don't waste it.

tedd

Beth Thursday, December 3, 2009 09:58

Mr. Sperling,
When we fill out your comment form it asks for the web site. I had assumed that since you put it on your site, you'd know to check the site. However, I see that you don't.

I am moving on to another menu system that actually works and the person responding to comments isn't rude. MY time is valuable too and I won't waste my time on this system

Good luck and maybe calm down a bit and not be so rude!

tedd Saturday, December 5, 2009 08:54

My menu system works as evidenced by hundreds of installations. But unfortunately, not everyone is capable of following directions. Some would rather display pompously than learn.

Clearly, the link you provided shows that you are throwing all sorts of code together, without following any standards whatsoever, in the hope that everything will somehow work. That's poor coding practice.

You have a lot to learn, in more than just coding.

tedd

Michael Monday, December 7, 2009 01:53

Tedd,

I tried the menu, and it works well in Firefox and IE6, but it seems not working in IE8. I followed the instruction and here is the URL

http://www.uastudio.net/menu_test/menu_template.html

I see the menu on your this page does work in IE8. Not sure why.

Thanks!

tedd Thursday, December 10, 2009 10:19

Michael:

You need a DOCTYPE to make the menu work correctly.

My bad, I often assume that everyone is creating well-formed and proper web pages with DOCTYPE and such, but sometimes my assumption is wrong.

I'll add the rule in the documentation.

Cheers,

tedd

Alan Thursday, January 7, 2010 07:35

Tedd,

Can I take it from the last post that as long as the DOCTYPE (which DW adds automatically) is present your code will work with IE8?

Thanks,

Alan

tedd Tuesday, January 12, 2010 09:15

Alan:

The point here simply is that all documents should have a DOCTYPE and be well-formed -- else, the document will throw the browser into Quirks mode (instead 0f standard mode), which causes the browser to render the page accordingly to its internal rules and not necessarily what you wanted. This is very basic web development concepts that should be realized by all web designers.

Cheers,

tedd

IainC Thursday, January 14, 2010 06:51

Tedd, small typo in Step 2?

tedd Monday, January 18, 2010 15:16

What typo? I still don't see it.

tedd

Steve Tuesday, January 19, 2010 21:12

While this menu works as intended for mouse users and people with no motor disorders or trembly hands, I feel that someone should point out that this menu doesn't tab through at anything other than the top level.

There are other drop-downs out there that do tab through, but still I would advise people to think very carefully about who they are alienating when using this type of navigation.

Sachin Monday, February 1, 2010 11:06

Not working in IE8
:(

tedd Saturday, February 20, 2010 08:17

Hi:

Did you look at this page using IE8? If you did, you would see that the menu works and what you said was simply not true. I have thoroughly tested this menu in all IE's (6+ including 8) and the menu works.

tedd

Brad Thursday, March 11, 2010 01:32

Thank you for making this great menu available and especially for providing all of the patient support.
Two issues - I have employed the menu on this page: http://stevenhonigberg.com/testpage.html
Works great in Firefox but absolutely not in IE6, though I thought I followed your instructions precisely (I noted that the code you posted in instruction 2 has an open tag, I did close it after media="screen". Menu css doesn't apply at all with this code left as is).

Also, is there any way to position the menu in the center of the page, regardless of page/screen size?

Thanks again for whatever assistance you can offer,
Brad

Brad Thursday, March 11, 2010 12:04

Hi Tedd
First of all, thanks for making this code available and providing attentive, patient support.
I'm attempting to use the menu here: http://stevenhonigberg.com/testpage.html
Two issues: even though I believe I followed your instructions to the letter, the menu will not appear in IE6 (I haven't tested it in IE7). It works perfectly in Firefox. I did note that your css import command in step 2 seems to have an open tag, which I closed after media="screen". The style and menu would not appear at all without taking this step.
My other question - is there any way to position the menu in the absolute horizontal center of the page, regardless of page/screen size?
Thanks so much for any guidance you can provide.
-Brad

Alexander Wednesday, March 24, 2010 10:58

In your example you dont put a closing tag after the second item
Item 2. Is this on purpose?

Alexander Wednesday, March 24, 2010 12:05

Dear tedd,

I notice that when I remove background and border from the elements of the menu, in IE8 the pull down menus will disappear after hovering down below the 5th entry. Is this known behaviour of IE8? If so, is there a work-around?

Thanks for this example and best regards,
Alex

ellorene Thursday, April 1, 2010 04:16

First of all: THANKS for the menu.

I have tried many other horizontal menu's, but many of them didn't work in IE8. Following the instructions for this menu really accurately didn't get it to dropdown in IE8 either.
Then I copied this webpage (the menu works in IE8 here) and then it did work well in IE8. After this I just deleted everything I didn't need and filled in everything I wanted. Still I didn't succeed in reproducing it myself within HTML-Kit.
Then after a night's sleep I had the idea to take a look at the very first line: !DOCTYPE HTML PUBLIC. I discovered a difference. (I hadn't read the lower part of the comments yet where Tedd has mentioned the DOCTYPE).

The line on the page where the menu works is like this:
This line is also on this webpage.
A new document opened in HTML-Kit gives automatically this line:
and in this one the menu does NOT work in IE8.

I played a little with it:
- Take away the word "Transitional" and the menu works in IE8.
- Add the word "Transitional" again, but add also "http://www.w3.org/TR/html4/strict.dtd": the menu works in IE8.

Anyway this menu was worth trying to find out, because I think it's a great menu, beautifully put together and too complicated for me to create it myself.

Luiz Tuesday, May 11, 2010 14:50

Ted, Hi! I'm new here and I'd like to check with you 2 lines of your code to see if they are OK.
Line 1:

Ron Sunday, June 20, 2010 00:21

This is definitely one of the most straightforward dropdown menus I've seen. So much so that I wrote a javascript which will generate the HTML code from an array, making it very simple to make and change the entries, and also possible to load it onto as many pages as you wish, just by referring to the scripts used.

Joshua Cripps Thursday, July 29, 2010 20:54

Hi Tedd,
This is a great menu; easy to install and well explained. Expect a donation shortly. I do have one issue I'm trying to solve though: I'm using some embedded google earth / google maps on my site and the google earth window always stays in front of the menu, such that you can see the dropdown items. The menu works fine with google maps; it's just with google earth that this strange behavior occurs. Any ideas how I could get the menu to appear on top of the google earth content? Here's a page you can witness this behavior on: http://www.landscapephotoguide.com/index.php?type=earth®ion=California . Try hovering your mouse over the "North America" box, then the "United States" box. There should be a list of states that appears but everything below "Arizona" gets hidden by the google earth window.

Any advice or suggestions would be greatly appreciated. Thanks much.

~Josh

Cliff Saturday, August 7, 2010 15:22

Hi tedd,

You have a really nice menu system here. I did notice that the top_parent links have an issue where the bottom portion of the button does function as a link when clicked. Meaning the link is not filling the entire button. I found this most prominent in Chrome and Firefox and less noticeable in IE.

Cheers,
Cliff

"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

[web-tips > horizontal menu]

A Great CSS Horizontal Drop-Down Menu

Menu

Links