tanfa - archived muse
:: View Archives List :: Home :: Skip to Have a Muse
Archive dated February 28, 2005
CSS DropDown Menu Support Area
#holding area for FAQ's
- Question:....
- Answer:....
Please post any questions relating to the Fluid/Accessible CSS Menus in the comments section of this thread..
Hi Rob.. not too sure what you mean
The dropdowns/popouts in these menus are working off the li:hover, the link rollover effects are done using a and a:hover.
If you want, please provide a link to a test page or send the HTML and CSS code via my Contact Form and I'll try to clarify an explanation.
Thanks
I know you stated clearly that this menu doesn't work in IE Mac. I don't have a mac for testing (yet) but a friend tested it, and said it doesn't work at all in that browser. No dropdowns, no links, no way to nav. Is there any way to feed IE Mac code so it at least sees something usable? Even if it is "ugly"?? My only other option is to repeat nav in a bulkier form across the bottom of the page, clutter I'd rather avoid if possible. Thank you in advance for your consideration of this issue.
Posted By bj on 08/03/2005 at 13:40pm «þ»
Hi,
This is an IE problem.
1: due to the total width of the menu I require it to be able to float into two rows.
In Firefox this is fine I forced a float at one menu Item.
In IE the sub menus refuse to display over the heading (h2) areas and in my instance when they display they are offset what looks like 150%
Also they dont float well skipping order and not staying in the flow of text.
My question is ... Is there a fix If not I will use a javascript menu with much pain:)
Many thanks Rob
Posted By RobCochrane on 09/03/2005 at 12:20pm «þ»
Rob - what you need to do is add class="menu" withing all the li tags. Then in the CSS chang a:hover to a.menu:hover
Posted By Doj on 10/03/2005 at 16:53pm «þ»
@BJ: re: IE/Mac as you're using the horizontal menu the top level row is just headings, but they could be made into links where they link to a bookmarked 1 page site map for example. So IE/Mac and any other IE users with js turned off will at least be able to navigate to it. You could use the same HTML as you use for the menu in your site map but just leave it unformatted so it displays as plain nested lists (same hierarchy). It would make an extra usability aid too anyway.
@RobCochrane
1. if you want it to deliberately fit in 2 or more rows.. rather than try to force a clear, you can just make the width of the #menu div container 36em (which is 3 x the width of your lists] and then remove the clearing CSS
2. it is the align="center" in the HTML which is causing IE to have an offset it is position the drop from the center of the li. So you need to remove that. If you want to center the whole menu you could then wrap the whole menu in another div and center it:
e.g.
#centermenu {
width: 36em;
margin: 0 auto;
}
3. The hovers not appearing over lower level headings = my bad the example was only done with one level but SEO Consultants original was not, so I missed a bit for IE. ooops
add to CSS:
#menu li:hover {z-index: 1;}
Posted By Claire on 11/03/2005 at 8:50am «þ»
Thank you,
I do appreciate your assistance
Rob Cochrane
Posted By RobCochrane on 12/03/2005 at 7:42am «þ»
Thanks, Claire! That will do the trick and avoid the clutter. Sometimes it just takes another pair of eyes looking at a problem . . . better solution than mine!
Posted By bj on 12/03/2005 at 14:30pm «þ»
Thanks for the script! Great stuff.
I've been trying to work it into my new site. I had to modify the style quite a bit, and something's gone wrong but I'm not sure what! It works perfectly in non-IE browsers, but it's broken in IE.
With the IE fixes from the example, the top-level items aren't inline. If I remove the IE-only hacks to "#menu h2, #menu a" and "#menu ul li", the items move inline but the drop-down breaks a bit. In both cases, the drop-down is the width of the page rather than the width of the top-level item.
Thanks in advance,
- Chris
Posted By ChrisPaterson on 24/03/2005 at 21:13pm «þ»
I tracked it down... it's because I'd removed the fixed width from "#menu ul", trying to have menus of different widths. With no fixed size, Firefox etc makes it as small as possible - but IE makes it as large as possible. <sigh> Fixed sizes it is, I guess...
Posted By ChrisPaterson on 24/03/2005 at 22:04pm «þ»
Hello, Claire
I have a problem with Horizontal CSS menu in Firefox/Mozilla. When menu item displayed over element with overflow:auto (or overflow:scroll), moving mouse to this item closes the menu. IE 5.x (Win) and Opera 7.23(win) 7.54 (Linux) works as expected.
Regards,
Igor
Posted By IgorE.Poteryaev on 27/03/2005 at 10:56am «þ»
Hello sir,
Its easy to use menu.Its happy to see your site.But the problem is when saving the page.It does not running the menu again.
Pls send me the code.
Regards
Ravinder
Posted By Ravinder on 29/03/2005 at 12:24pm «þ»
Hi Claire:
I think this is a great CSS menu! But the only problem I am having is trying to re-create it without a fixed width on the menu structure. I want to let the width be defined by the content in each.
Regards,
Eric
Posted By EricBrunt on 14/04/2005 at 19:19pm «þ»
hi claire
your menu is just great!
of course there is a but....
the way my website is designed i have to "move" the menu from the left by about 70px.
the website is done "flexible" but i have a border on the left and on the right side. one part is in the wrapper and the other is in the content.
whatever i do to the menu - either size it to 80% or ad a margin to move it - the whole things stretch the website.
i hope you can help me... :-)
Posted By daniela on 05/05/2005 at 21:20pm «þ»
Claire
Great script!
Worked perfectly in Firefox out of the box, but I had a problem with IE (XP SP2): the menu items in the second level ul were offset by 50% of the width of the top level ul. My menu is quite deeply nested in divs and a table which may explain it. The fix was to add a left:0 style:
#menu ul ul{
position:absolute;
z-index:100;
left:0;
top:auto;
display:none;
}
Now it works fine in IE and Firefox.
If it doesn't break any other browsers, you might want to add this fix to the script...
Posted By GeoffCaplan on 08/05/2005 at 11:39am «þ»
Hi Claire!
Great CSS (menus) here! :-)
I would love one enhancement, and have messed with it a bit and could not get it to work - I want the vetical menu to keep the higher level menu items hi-lited even when the user moves to a lower level menu item...
???
Any halp is appreciated!
Thanks!
Kevin
Posted By Kevin on 08/06/2005 at 19:00pm «þ»
Kevin there is a way, you need extra class names, I will do a mock up and link to it soon - sorry for delay I have been on holiday
Claire
Geoff #16,.. Yes if you have text-align set to center for your menu text IE will set the left position of the nested "ul" - default auto - as center too, so setting it explicitly to "0" will fix it, thanks for bringing that up..
I won't fix the scripts as you ask as with CSS everything is flexible and there is no "correct" way, but I will add it to the FAQ section fairly soon
cheers, Claire
Claire,
My problem is similar to what Rob was talking abou tand I think it has to do with z-index as well. In a 3-column page with the two sides fixed width, I have a pure css drop down menu on some pages. They work great unless the browser windows is shrunk down and the menu items wrap to two lines. At that point, in IE the top elements (the ones left on the first row) still show the dropdown but are not accessible - they look seethrough and disappear once you try to run your mouse over them. I was able to fix the problem with in Firefox using z-index but it has no effect in IE.
Help!
Thanks,
Andrea
Posted By Andrea on 13/06/2005 at 18:51pm «þ»
@Kevin #17
it can be also be done without extra class names as I mentioned previously, but becasue of IE it needs to be slightly more convoluted (as with the CSS for displaying/hiding as we can't target a hovered child of a hovered child with the IE script.)
example code which would need to be extended depending onhow many levels of drops you have:
-------------
div#menu ul li a,
div#menu ul ul li:hover ul a,
div#menu ul ul ul li:hover ul a
{
color: #000;
background: #efefef;
}
div#menu ul ul li:hover a,
div#menu ul ul ul li:hover a,
div#menu ul ul ul ul li:hover a
{
color: #a00;
background: #fff;
}
---------
Claire
Claire,
First off, wonderful write up and great work on the menu.
Just like eveyone else, I have an IE issue with the menu. For some reason, the submenu's won't pop out. It of course works fine in Firefox. I have verified that the csshover.htc file is in the proper location and that the IE fix portion is in the html file. I'm confused!!
Any ideas or suggustions you can offer would be greatly appreciated.
Thanks in advance!
Kevin Petrak, MCSE
forced into web design and Halloween nutcase.
Posted By KevinPetrak on 16/06/2005 at 21:45pm «þ»
Great menus! I'm using your horizontal one for a corporate intranet. In general, people love it, but... (there's always a "but"!)
a) Is there a way to specify the hover/display time? Quite a few staff at this site complain that if they don't hover exactly over the menus and subs, they disappear so they have to start again from the top level. Some sort of "stickiness" I guess, whereby the menu stayed on screen for an extra second or so. I've checked the W3C specs for this but can't seem to find anything.
b) The fixed width of each menu item is problematic as IE6 and FireFox deal with these differently. I suspect this is probably associated with how IE "adds up" the dimensions of a box. But I'd like the 5 or 6 (o whatever) menu items to auto size to fit the available content space (which is contained by a DIV tag). Any way to do that so it works the same on IE and FF without extra space off to the right of the menu?
Thanks again for sharing your menus.
Rhonda
Posted By Rhonda on 21/06/2005 at 7:20am «þ»
Having spent very little time in the css world, I set out to update our website, and have hit a wall.
When I look at these files on my pc, they work fine. Both IE and firefox both show the mun working as it should. However, once I uploaded it to the server, IE no longer uses these csshover.htc...
This site is still a work in progress so please dont laugh too hard, but any help with this menu issue would be appreciated.
Posted By Fridley on 24/06/2005 at 3:00am «þ»
Re: Fridely. We had the same problem here with the ie not rendering the menus when being servered from the server. When the menus were served from a local directory, they worked fine. The problem was resolved by adding a mime type for .htc files. Without the mime type for .htc files, the server wouldn't send the file and there were 403 (forbidden) errors in our web logs. Good luck!
Posted By Nick on 28/06/2005 at 21:30pm «þ»
Hi,
When using the menus in IE, if the browser cache settings are set to 'Check for newer page Every Time', then when you mouseover the menus it appears that the browser reloads the menu content from the server. This results in the menus loading incompletely and slowly. Has anyone else seen this behavior or know how to resolve it? Thanks!
Posted By Nick on 28/06/2005 at 22:43pm «þ»
Hi,
I'm using your menu, with the htc file for IE. Is there a way to implement a delay? If you get out of the menu (with the mouse), then it should still be visible for a few seconds. Is it possible to do this, or do I have to use a complete js/css menu then?
thx 4 help.
Posted By Norman on 07/07/2005 at 10:40am «þ»
Hi,
I am using your menu, but have a problem implementing it in a 3 column layout. Left column Menu works okay by itself, however when I try to put another menu in the right column, I can't seem to get them to work.
Is there a way to put 2 of these menus on a page?
Posted By Steve on 16/07/2005 at 23:14pm «þ»
@all, apologies for delay in answering, been on a break.. if you bear with me I'll try to now get around to answering and building FAQ List!
Hi there
I am setting up your menu to use it on my site:
http://www.greylizard.net/ccsmenutest.html
Does anyone know if I can put bits of the code in a seperate file and load it into a page with each page access? (in the style of css)
Otherwise my pages are going to get bandwidth heavy
Thanks very much
Justin
Posted By Justin on 28/07/2005 at 11:15am «þ»
Hi there,
I am using the CSS horizontal menu on my webpage, and am finding some problems with IFrames, the moment you have hovered over a menu item that is inside the iframe, the menu will disappear.
Does anyone know of a fix for this?
Posted By Ryan on 08/08/2005 at 19:56pm «þ»
This is a masterpiece. But, to have the popouts display underneath the ul, so that it looks like a tree menu. Also, will the IE fix work with the modification.
There are times when I will use the pop-out, but most times I want a tree-like menu without using javascript.
You know, I am really looking forward to your answer.
Best regards.
Monique
Posted By Monique on 15/08/2005 at 20:55pm «þ»
I have a problem with menu in Mozilla/NS - it distappear's over iframe. You can see what I meas on http://ekatalog.intercars.com.pl/ic/menu
Posted By Bartek on 22/08/2005 at 14:44pm «þ»
Hi,
Thanks a million for this great dropdown, it's really a golden piece of code...
Unlike other menus, this fits best on my new coded CMS and it was a real pleasure to fix it with PHP and MySQL and generally working with it... The trouble is unfortunately that the hardest part becomes it's customization. I'm not talking about hovers or borders, etc, but it's fixed width... Some links aren't as wide as the others and when it's about using the horizontal menu might not fit everything in there...
I stretched it a little bit by adjusting the width value to smaller than 12em to solve the space problem (i.e. #menu ul) but in this case, my bigger links are displayed on two rows while the shortest are displayed as they should be but now some buttons are bigger in size than the others... How can I overcome that without loosing anymore hair?
Here's what I'm talking about: http://www.eclipsedesign.net/samples/cms/
Thank you very much, I'm really looking forward for your reply.
Best regards,
Rem.
Posted By Rem on 29/08/2005 at 6:08am «þ»
Hi Claire,
For the most part, the dropdown works great! There's just one issue I'm having in IE.
On the index page, the menus work, but go into "About Us" (it's the only menu linked to pages) and click on a page. Once you're there... the menus don't work when you get down to the fourth or fifth selection. Try it.
Am I doing something wrong?
Thanks in advance,
-Marc
Posted By ">Marc on 29/08/2005 at 16:58pm «þ»
I figured it out... You just need to make sure the <li>'s have a background or background color. That's it. Thanks!
Posted By Marc on 30/08/2005 at 23:55pm «þ»
First let me thank you for all of your hard work on the Menus. I have used your Horizontal menu as the idea behind my menus. I have made a few tweaks to fit me needs, but for the most part it is all yours.
Anyways, I have some "Media Player" video streams on my site. When the menu is popped-down it appears to go under the "Media Player" stream (I am using Object-Embed for the stream). Here is a link to one of the pages.
I am a rookie to this level of CSS so I am not sure how to solve this one.
Posted By Jim on 31/08/2005 at 17:51pm «þ»
Claire,
I'm the one who contacted you about the comments not working as I was trying to comment here. Now that it's fixed...
I'd love to know the answer to the problem that Eric (#14) and Rhonda (#23) mention. How can we get the menu items to size to their content instead of fixing the width at 12em? I think Rem (#34) is essentially asking the same thing. I'll be trying to figure this out myself today, but if anyone out there has solved it, I'd love to know how you did it.
Once again, great menus and thanks for sharing.
Cheers,
Tim
Posted By TimT. on 24/10/2005 at 15:51pm «þ»
Hi Tim, thanks for the heads up on the comments..
>>differing widths
Unfortunately that would not be easily possible (if at all) with this menu.
You can set smaller widths on each nested list
ul ul {width:..} or ul ul ul {width:..}
but the nested lists are absolutely positioned and effectively they need a width specified. The correct way to compute the width of an AP element is to use all four co-ordinates which IE doesn't do anyway.. and in this case the left/right co-ordinates would always be a variable anyway..
width:auto; along with white-space: nowrap works in FF (width:auto; is broken in IE!) and even then it only works on the drop downs.. not the pop-outs cannot compute their width as the left co-ordinate is 100% it effectively computes the width of that ul to 0 and the <a> elements overflow it.
if you come up with anything let me know..
Claire
Posted By Claire on 25/10/2005 at 14:24pm «þ»
Hello,
After spending hours searching the web, I am please to see someone that has this out there. Is it possible to get this in a zip format? I have tried everything from the turtorials to starting from scratch. I can not seem to get it to work right. I would greatly appricate it. Once I get it working I will respond back with the URL for the non-profit organization.
Thank you in Advance
Posted By PK on 03/11/2005 at 20:10pm «þ»
Hi There Thank you for your wonderful script!
I have one question.
Being new to CSS, I do not know the answer. I would like to have my CSS externally linked instead of in the head of my html file. (I know how to do that part) how does this effect the EI fix bit of the script? How should it be expressed in an external CSS file or can it be?
"<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->"
I have experimented with it but it doesn't seem to work.
Posted By JGrobe on 09/11/2005 at 3:42am «þ»
How can I make IE display table rows the same size that Firefox does? Firefox displays exactley as intended, but IE expands the hieght of the rows so that instead of the table using half the screen, the table fills all of the screen which means that you have to scroll to see the rest of the page.
Posted By John on 09/11/2005 at 22:53pm «þ»
Great site, and great CSS information. After looking the site you can see I have made many changes to menu. After doing so two problems arised. Both I have tried to fix with various methods mentioned on this site as well as Peter Nederlof's site and others. First I can't get the z-index: 1; to work properly. I am sure I am just not enclosing it in the proper elements. Also in IE it is very slow. I tried adding the classes and id's.
Any assistence is greatly appreaceated. Thank you for your time,
Bobby
Posted By BobbyF on 10/11/2005 at 19:57pm «þ»
Hi Claire,
I have 2 questions. First of all, the IE fix doesn't work from my website, but it displays your examples perfectly. I read around and found out that Windows XP SP2 changed the mime-type requirements, so is the IE fix not working for me, because I'm viewing it from my hard drive, instead of from a webserver?
Secondly, how would I implement extra dropdowns? I tried adding extra ul's where they seemed appropriate, but that didn't work lol... Thanks for the help.
Alex
Posted By Alex on 11/11/2005 at 17:53pm «þ»
Nevermind, I figured it out. But like the others asked, is there a way to implement a delay so that the menu doesn't disappear the split second it hovers outside of the menu?
Posted By Alex on 11/11/2005 at 18:19pm «þ»
Thanks Claire for your great information and support for the CSS menus.
I have a couple of design issues you might be able to help me with. Basically I would like to have a div#main which always has the div#menu across the full width at the top and beneath this a div#content which displays the text, but I need this to be scrollable.
In FF if I set the #content to be scrollable, the submenus don't display; if I set #content to visible, I can't get it to scroll (naturally)
At this time I have completely broken the IE bit and so it is not displaying properly at all.
Posted By VaughanRoberts on 20/11/2005 at 23:42pm «þ»
Hi!
Is it possible to use a background image with this menu? Mine doesn't seem to be appearing...
??
Posted By Bean on 28/11/2005 at 21:20pm «þ»
I am running into an issue with the menu in Firefox versions < 1.5 (1.5 works correctly). The issue is that whenever I place my cursor over and area where a submenu should drop down, everything below the menu will move to the top of the page, then reposition where it should and no submenu will drop down.
May be similart to the issue in #12.
Thanks,
Mike
Posted By Michael on 08/12/2005 at 22:30pm «þ»
Hi everyone I have one question.
How to change script for repositioning
nested list on the left side? I need that for positioning this menu on the right side of my site.
Thanks!
Posted By cika on 10/12/2005 at 19:40pm «þ»
Hello. Awesome Menu of course as from all other comments.
My question is if you know of any reason why your menu wouldnt display over flash movies. I have added the wmode- transparent paramenter for both objects and embeds for Netscape. This fix correctly fixes the problem in firefox but the second levels still display under the flash movie.
Thanks for any help
Posted By Matthew on 13/12/2005 at 19:37pm «þ»
Hello, At the URL above I have put your wonderfuly easy CSS menu. But I have a problem. It doesn't work in FireFox or Netscape. Just fine in IE.
Have you seen this before? If so whats the fix?
Wonderful tutorial though, nicely written.
Thanks.
Posted By DarrenKendall on 16/12/2005 at 20:50pm «þ»
http://www.thedmpgroup.com/new/int-template.html
Here's the URL, as it isn't showing in my message
Posted By DarrenKendall on 19/12/2005 at 14:20pm «þ»
problem fixed. I was using dreamweaver and it had closed my line item <li> tags when it shouldn't have.
Posted By DarrenKendall on 19/12/2005 at 14:45pm «þ»
Thank you very much for you elegant code. I have a couple questions that I haven't been able to wrap my mind around.
1) When I make the h2 headers links, there are issues in all browsers. If you look at my test page { http://polaricecap.net/test/taphandles/index.html } you'll notice the problem on the last link to the right, labelled "retail handles". I have a feeling the problem is an interaction with my other a:link and a:hovers already in my css. I've tried further specification, for example using { #menu ul li h2 a:link } to no avail. Any thoughts?
2) My other question is regarding positioning. I would like to move the horizontal menu bar to the right and down by about 100 px. However, when I wrap my menu div with another div and position it, it breaks the menu. Any thoughts on this?
Thanks in advance for your time and consideration.
Posted By DanielGenser on 25/12/2005 at 5:51am «þ»
Love this easy to use code!!!
I have only had a few bugs to work out to make it compatible with IE + and FF1.5+. It is very easy to nest within tables and change size, color, ect... VERY CUSTOMIZABLE!!! One thing i wanted to do and i have been working on it for a few hours now but cannot seem to get it to work is setting the alpha (opacity)setting of the drop down menus. It is very easy in FF however when i use IE it worked on the first tier but then wouldn't display the menus below that. evntually i gave up and decided to use only one level since i got that to work. if you have a work around for this i would love to see it and implement on future sites.
Posted By tim on 28/12/2005 at 4:39am «þ»
I found the info needed for the menu to drop in front of swf (flash files)
here is the entire code for your enjoyment questions email me:
Posted By tim on 28/12/2005 at 7:05am «þ»
Hi, I played around with the menu and it starts to look great! Everything I would like to change, is changed now.. Except...
I wish to create a h2 hyperlink as well. If I apply a normal a href, the layout is comprimized...
Is it possible to put links in the menubar? Please advise.
Kind regards
Posted By Michelle on 04/01/2006 at 12:16pm «þ»
Hi, firstly i want to thanks you for your perfect CSS dropdown menus. The problem i am facing is as follows - i have implemented both your horizontal and vertical dropdown in a single page the probleme i am facing is that whenever i do a hover on the Horizontal menu the contents of the Vertical Menu overlap and vice versa, this is only happening in IE, i have allread used your HTC please suggest a solution regards
Bijoy
Posted By BijoyChatterjee on 10/01/2006 at 8:19am «þ»
Hi !
I have a problem with the path for the csshover.htc.
/css/csshover.htc
/css/menuIE.css
/en/pages/page.html
On the html page, I imported the menuIE.css (which contains behavior:url(csshover.htc)).
But I can't get the csshover.htc to work. I have to put it in the page.html folder (which is really not what I want).
I tried a lot of things, but nothing worked.
Posted By CélineNicolas on 17/01/2006 at 9:15am «þ»
Can anybody pls tell me how we can put shadows around text boxes the most simplest way and the effect shud be the smae as given in this page like a shadow...
Posted By Bino on 23/01/2006 at 12:02pm «þ»
Hi there, I love your menu and am currently using it on my website. I'm having trouble trying to figure out how to align the whole horizontal menu center on my page. Ive tryed div align, putting float to center and all kinds of mess with no luck.
Posted By Mike on 24/01/2006 at 16:41pm «þ»
Hi i am trying to use the alpha transperency that CSS supports(although you have to specify the right code for different browsers) the code i am using is this <br /><b4 />filter:alpha(opacity=90); -moz-opacity:0.90; opacity: 0.90;<br /><br />I have applied it to the <li> attribute and i tried giving it its own class and apply it to each individual element in the menu and guess what both methods work perfectly in FIREFOX however the pop outs stop working in IE.
can anyone please HELP me with this as i have exhausted my resources on this and it could probably use a fresh pair of eyes!
ALSO FYI in my site listed below you can see how the use of images in the 1st tier of the menu work this is really a cooland versatile script thanks so much!!!
view the menu by clicking here
thanks for your help in advance
Posted By Tim on 31/01/2006 at 21:35pm «þ»
here is the code i am using in the alpha transperancy
filter:alpha(opacity=90); -moz-opacity:0.90; opacity: 0.90;
sorry about the br tags above
Posted By tim on 31/01/2006 at 21:37pm «þ»
Hi, we used the css menu and it happened that on ie list selection elements (<select>) a drawn over the css menu. Is there a way to solve this problem?
Posted By Armin on 01/02/2006 at 9:43am «þ»
Hi there,
I have found an interesting artifact, while trying to use your code - in Firefox/Mozilla, when the dropdown menus fall over a scrollable area, the menu items disappear, before I have the chance to click them.
Any ideas how to overcome this problem ?
Posted By Mark on 02/02/2006 at 22:20pm «þ»
I'd love to see an h2 link. Anybody have any good examples of the menus with the h2's as links?
takayuki
Posted By takayuki on 04/02/2006 at 15:53pm «þ»
Hi
I am trying to push over the top menu so that all fix on a 800 pixel width.
How do I get blocks to adjust to aligh side by side with not space between?
Thanks
Susan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Horizontal CSS Menu Tutorial ~ Example Page 7</title>
<meta name="description" content="Example 7 - CSS Horizontal DropDown & Popout Menu Tutorial"></meta>
<link rel="shortcut icon" href="http://www.tanfa.co.uk/favicon.ico" />
<style type="text/css" media="screen">
@import "tanfa.css"; /***** General formatting only ****/
/**************** menu coding *****************/
#menu {
width: 800px;
float: left;
background: #669933;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 10em;
float: left;
}
#menu a, #menu h2 {
font: bold 10px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0 1px 0 0;
padding: 2px 3px;
width: 125px;
}
#menu h2 {
color: #fff;
background: #669933;
text-transform: uppercase;
width: 125px;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #3366CC;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 800px;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<!-- start menu HTML -->
<div id="menu">
<ul>
<li><h2>Home</h2>
</ul>
<ul>
<li><h2>Contact Us</h2>
</ul>
<ul>
<li><h2>What's New</h2>
<ul>
<li>Recycling Works Newsletter</li>
<li>Press Room</li>
<li>Publications</li>
<ul>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>About Us</h2>
<ul>
<li>About RBAC</li>
<li>Staff</li>
<li>Partners</li>
<li>Press Room</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Financing</h2>
<ul>
<li>Grants</li>
<li>Loans</li>
<li>Recycling Tax Credits</li>
<li>Other</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Recycling Markets</h2>
<ul>
<li>Recycling Markets Directory</li>
<li>Market Assessment</li>
<li>Commodity Pricing</li>
<li>Waste Trader</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Business Assistance</h2>
<ul>
<li>Start-up Business</li>
<li>Existing Business</li>
<li>Relocating Business</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Posted By susanRoemer on 08/02/2006 at 17:56pm «þ»
Wow you have been swampped with questions about your menu.
I just wished to ask about the menu
more then 4 levels causes it not to display in all browser types
it displays after 3, but once you hit the 4th level it displays all the submenu's at once under it.
is it a limit-less end of menus or is there only a max of 4 levels?
Thanks
abyss
Posted By Abyss on 14/02/2006 at 9:39am «þ»
hi abyss.. the menu is limitless, but you will need to add more css for each further levels
I would be careful though as further level could go off the page.
----
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
------
that's the bit where you need to add more depending on how many levels
e.g.
-----
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul,
div#menu ul ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu ul ul ul ul li:hover ul
{display: block;}
------
Claire
Posted By Claire on 17/02/2006 at 11:42am «þ»
Susan, I don't quite understand and the HTML paste won't work here.
I'll check it out and get back soon, I really am trying to move this site over to new backend, and will set up a clearer help area at the same time if I can ~ I'm sorry I don't always have the time to answer all questions personally
Claire
Posted By Claire on 17/02/2006 at 11:48am «þ»
takayuki..
I don't have an example, but my suggestion has been to others when using these menus is to nest a link inside the h2 and have it link to a site map which shows all the lists in full, e.g. not hidden as an accessibility aid
And then instead of just formatting the h2 in the CSS you would format the
h2 a {}.. to suit
other than that it should work the same way as it the hovers on the li elements that make it work whether it's a link or not
Claire
Posted By Claire on 17/02/2006 at 11:55am «þ»
re> H2 questions..
perhaps the easiest reply I could give is that it does not have to be an h2.. it could just be a simple link,
I did it like this becasue when the CSS is turned off, the menu still has nice headings for the top of the sections which was an SEO/Accessibility remit 
Claire
Posted By Claire on 17/02/2006 at 12:00pm «þ»
I got your code to work GREAT! Thanks. But I added a fourth level in my flyouts and that block it is showing but behind the remaining <li>'s in it's parent. What am I missing?
David
Posted By DavidWhite on 25/02/2006 at 3:07am «þ»
Never mind, I didn't read all of the posts before posting myself. You know us coders... gota have it
Posted By DavidWhite on 25/02/2006 at 3:23am «þ»
Thank you so much for all your work on this brilliant idea!
With the brown nosing aside 
.... my question has been asked before(23, 27, 45) but I can't find the answer.
Is there any way to keep the menu from disapearing the second your mouse goes off it?
Thank you so much for your time.
M
Posted By MichelleThacker on 27/02/2006 at 18:46pm «þ»
I have tried reading through your tutorial and others as well as the questions other people had. I think your site is helpful and I am hoping maybe you can help me solve my problem.
ok you can view a basic menu at the address I provided.... want i am wanting to do is where the li has 2 ul's in it i want those to display as 2 seperate columns. Is this possible? I have another example that seems to work in firefox but not IE... it also works on safari on my mac. it is the same address the page is just called menu.cfm instead of menu2.
Any and all help would be appreciated
Posted By JoeySouthard on 27/02/2006 at 22:09pm «þ»
Hi Claire
Firstly your solution to pure css menus is just great! If your not already 'blue in the face' from answering these I could do with some help.
I have a 'barely modified' version of your code which works beautifully in everything (IE5&6 Firefox, Safari) bar IE7 Beta.
http://www.thedesigntribe.com/clients/has/index004.html
Any idea what went wrong in IE7 for me?
Cheers Ivan.
Posted By TheDesignTribe on 02/03/2006 at 21:29pm «þ»
Hi Claire,
I got it, IE7 doesn't like the @import method of importing stylesheets.
Posted By TheDesignTribe on 03/03/2006 at 10:53am «þ»
Hi Claire, the thing I like most about your menus is that the only hook you are using is the div id="menu". It would be nice to use a graphic that indicates an item has a sub menu. Can you think of a way to do this without using a class in the markup? I simply use > (which is XML compliant sub menu indicator) at the end of the item name (eg. Item 1 >) and if I am using this item as a simple header, I use href="#x" in the anchor, which links nowhere and prevents a jump back to the top of the page.
Bill
Posted By Bill on 03/03/2006 at 10:57am «þ»
I have incorporated your horizontal CSS menu in a new website I'm designing and it's working perfectly. I love it. However, I would like to change the height of the whole menu because it appears "lost" on my webpage being at the very top of the page. How would I go about increasing the height without screwing up the whole layout?
Thanks for all your tips, I've learned so much from them.
Diane
Posted By Diane on 03/03/2006 at 17:32pm «þ»
Thanks so very much for taking your time to create this very useful and informative site.
Posted By Dehaf on 04/03/2006 at 14:06pm «þ»
I thank you for a wonderful site. Keep it going, thanks.
Posted By Fawosib on 05/03/2006 at 9:43am «þ»
plz solve my problem yaar my vertical menus r not working means they r blocked in safari of mac never drop down plz suggest me some solution for that.
Posted By seema on 07/03/2006 at 8:40am «þ»
Thank you for the great menu and tutorial Claire! I've been struggling to build the simplest dropdown menu that is a combination of links-only at the top level plus a couple of single level drop downs mixed in, but I need the top level "buttons" to have variable widths. The words I need to include at the top level range between 3 and 15 characters and one width for all does not work well.
I hope I have found the answer for a single level dropdown. (This definitely does not work with fly-out sub-menus!) But I need someone with more experience and/or other browsers to test it. So far I've been able to test in IE6, FireFox 1.0.7, Opera 7.54, and Netscape 7.2 and as far as I can tell it looks OK.
What I did was replaced the #menu ul {width: 12em;} with #menu ul {width: auto;}, plus I added #menu ul ul {width: 9em;}. To satisfy IE I added #menu ul {width: 1%;} to the conditional statment in the HTML head. This seems to be allowing the always-visible top menu level to be of flexible width, while keeping the drop down level a wider, consistent width. Again, so far as I know this only works for a single level dropdown menu. I hope! Any feedback?
Posted By Virginia on 08/03/2006 at 5:38am «þ»
I'm getting closer but still strugling a bit with the IE version of your horizontal menu tutorial. On my page you can see there is a large amount of space between each of the drop downs. I finally tracked this down, I don't think the exception code for IE is working because the #menu ul li a {height: 1%;} is not doing what it should.
Do you have any idea why this might be happening?
Love your site, your examples, and your tutorials thanks again for all you do.
Posted By KeithKaiser on 09/03/2006 at 16:18pm «þ»
I would like to ask how can you create that! Excellent site and very informative. Really learned a lot more from this web site.
Posted By Xenodiw on 09/03/2006 at 17:35pm «þ»
Hi,
I'm trying to make a drop down menu using images for the 1st level menu items. So, I have
MenuItem1, MenuItem2, etc, for this first level. When I mouse over MenuItem1, I want a drop down menu list to appear with a colored background. The problem is I'm getting the MenuItem1 background image repeated and overriding the background color for my menulist. This is not the behavior I'm expecting.
I hope you get the idea.
Thank you in advance for your help
Posted By RicardoMontoya on 11/03/2006 at 7:52am «þ»
I would like to ask how can you create that! I would like to ask how can you create that!
Posted By Qisekor on 11/03/2006 at 17:40pm «þ»
I'm using this excellent css horizontal menu on a project I've just started. It was an excellent solution for my client's needs. Thank you.
I have added links within the <h2> tags (only the 'Home' link actually takes you somewhere at the moment), and I'm hoping I've provided a solution to the <li> width problems.
See the CSS in the actual html page within the commented stuff for IE!
Although, it's not elegant, and I've not tested in all browsers, it works in Firefox and Safari (Mac) and on the PC in IE 6. Of course, I've figured out the em sizes to fit with the text in my own menu.
Hope this is useful to someone out there.
Thanks for releasing this solution to the wild...!
Posted By Tracy on 13/03/2006 at 1:57am «þ»
Click on my name 'Tracy' at the bottom of my last post to see the working menu.
Posted By Tracy on 13/03/2006 at 1:59am «þ»
Click my name below for the web site.
Tracy after reading your post I went back and revisited the problem I was having (see earlier post) and finally spotted my error... so thanks for being the inspiration for the cure.
Now if I could only overcome the problem of the drop downs not being selectable below the main page contents.
Posted By KeithKaiser on 14/03/2006 at 20:13pm «þ»
I don't believe this, and I am going nuts trying to figure it out. I used the horizontal CSS menu on a website and it works beautifully.
Now I wanted to do the vertical menu, and I copied EXACTLY all the CSS coding for the vertical menu, downloaded the new htc file, wrote out the HTML and it IS working in EVERY browser except IE. (I have IE 6 Updated Version SP2.) I can see the popouts in Opera, Firefox and Netscape and MSN, but for the life of me I can't figure out why I cannot see them in IE.
Any clues on what I should do now? I would really appreciate a bit of help on this.
Thank you for a wonderful, enlightening website.
Diane
Posted By Diane on 17/03/2006 at 17:35pm «þ»
After sitting here for hours, I finally figured it out, although, I have to admit it was by trial and error.
My vertical menu finally works with the exact coding you provided in addition to adding:
body {
behavior: url(csshover2.htc);
}
above this:
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {
float: left;
width: 100%;
}
#menu ul li a {
height: 1%;
}
#menu a, #menu h2 {
font: bolder 1em/2em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
All my nested pop-outs now POP-OUT!!
Love it -
Diane
Posted By Diane on 17/03/2006 at 20:20pm «þ»
Hi there everyone, to start of i must say im as pleased with the menu as everyone else here is, its pefectly explained and leaves room to play around with if needed.
Great tutorial. There is one small problem i cannot get around. In IE (it had to be IE problems :p) when i leave the page refresh to everytime i visit the page the menu starts drawing blancs in the anumation etc (i updated it with custom backgrounds). Except for putting it back on automatic refresh is there an SOlution for this problem for? for more info check the url i included in IE and set page refresh to every time :)
Posted By Bjorn on 20/03/2006 at 16:24pm «þ»
Hi,
Congratulations on an effective and easy to use CSS menu!
I am attempting to get transparency working, and as per postings 55, 56, 62 and 63, I have added the following styles
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block; filter:alpha(opacity=65); -moz-opacity:0.65; opacity: 0.65;}
This results in opacity working in FF1.5, but not in IE6SP2. I read on
http://www.quirksmode.org/css/opacity.html
that "...an element must have layout for a filter to work." Can someone explain what needs to be done to implement this in the CSS menu?
Thanks,
John
Posted By JohnL on 21/03/2006 at 6:48am «þ»
Hi all,
I have been using this menu on my site for sometime but I have just noticed that the IE workaround has stopped working. This seems like a server problem as it works locally on my machine and lalo I have uploaded it to a page on a friends website and it works fine but refuses to work on the server where my page is hosted please take a look: -
Not working site:-
http://www.grand-national-world.co.uk/gnw/gnw_frontpage.html
Working Site: -
http://www.funkyharps.co.uk/abc/gnw_frontpage.html
All the code is the same but on the working site I have only uploaded the bare HTML and the CSS.
Anybody got any ideas on this?
I guess I need to ask my provider why there is a problem but not sure what to ask.
Thanks in advance
Dave.
Posted By Dave on 21/03/2006 at 19:17pm «þ»
Hi Claire
I am working with your wonderful DDM - your instructions were excellent thank-you! :)
My one trouble is: I am trying to include the html/menu.css as a SSI file that is just inserted into about 100 pages.
When the menu is on it's own it displays perfectly - see:
http://widebrownweb.com/menu/index.html
But as soon as I include it as a SSI file - the fonts and widths are all decreased in size. See
http://widebrownweb.com/m4-1.shtml
I have tried everything (I think!!) - including tweaking .htaccess files etc.
Do you have any suggesions or advice as to how I can fix this?
Many thanks
Simone
Posted By Simone on 23/03/2006 at 23:35pm «þ»
I love your vertical drop down menu, but can't link it to my HTML docoument. It open on it's own url, but not when linkted to HTML. I've checked all the syntax and it appear correct. What can I do to use this menu on all pages.
Posted By Jamie on 29/03/2006 at 10:31am «þ»
Have mastered drop down menu how do i align it with the rest of other main page memu so its not below.
Posted By helen on 10/04/2006 at 8:36am «þ»
Sorry but muses are now closed on this article
previous :: top of page :: next
Good afternoon,
I would like to use your menu on a clients website. This website already has a CSS file with a and a:hover in use. In your menu the same a and a:hover are used.
Is there some solution for this problem??
I would like to change those two elements in the CSS of the menu.
Regards,
Rob
Posted By Rob on 03/03/2005 at 19:26pm «þ»