In redeveloping the Venturelab site we became increasingly aware that there was a lot of content that needed navigating extremely simply and fairly rapidly. We have so much to say and such a lot of content that the navigation of the site needed to be even more dynamic and encompassing than normal.
Demo
Each page features a sub-navigation area, which links to all the other pages within that section of the website. This is great, and works perfectly, but in order to get to, say, the FAQs page from the home page, you’d first have to go to the about page, then on to the FAQs from there. This is by no means unacceptable, but we like to go that extra step at Venturelab…
I was looking at the main menu of the site when inspiration struck. Something as common and simple as a series of dropdown menus under each meta menu item would improve the navigability and usability of the site massively. Also, they are incredibly simple to create, and here’s where I teach you how…
The concept
What a dropdown menu provides is a hierarchical overview of the subsections contained within the menu item that spawned it. Basically, it lists all the subsections within a section of a site when you hover your mouse cursor over it.
They are extremely useful in showing what a section of a site contains, and allowing you to access it from anyway else in that site, whether that be the parent page of that subsection, or a page in a different section altogether.
The markup
A lot of dropdown menus rely on bulky, extraneous markup and Javascript to work, ours will use only the cleanest HTML and some lean CSS, with some lovely progressive CSS3 for good measure.
<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>
<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>
</li>
<li>
<a href="#">Product</a>
<ul>
<li><a href="#">Small product (one)</a></li>
<li><a href="#">Small product (two)</a></li>
<li><a href="#">Small product (three)</a></li>
<li><a href="#">Small product (four)</a></li>
<li><a href="#">Big product (five)</a></li>
<li><a href="#">Big product (six)</a></li>
<li><a href="#">Big product (seven)</a></li>
<li><a href="#">Big product (eight)</a></li>
<li><a href="#">Enourmous product (nine)</a></li>
<li><a href="#">Enourmous product (ten)</a></li>
<li><a href="#">Enourmous product (eleven)</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>As you can see here the markup is simply a series of nested <ul>s. No verbose IDs/classes, no <div>s, just rich, semantic code.
The #nav <ul> contains a series of <li>s, and any that require a dropdown then contain another <ul>. Notice the dropdown <ul>s have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
The CSS
This is where the magic happens—we use CSS to transform a series of nested <ul>s into a smooth, easy to use, neat and self-contained dropdown menu.
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}Just a regular horizontal navigation menu…
Right, let’s now break that down… The first section is fairly self explanatory—here we are just setting up a regular horizontal navigation menu, the same as any other. However, notice that selectors such as #nav li and #nav li a will select all list items and links in the dropdowns too. Here we’re using the cascade sensibly.
One thing of note however is applying position:relative; to the list items, this allows us to use position:absolute; on the nested <ul>s later on.
The nested lists
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}Here we have the CSS that controls the <ul>s nested within the top level list items. Obviously we need to remove bullets with list-style:none;, then position:absolute; to position the dropdown above the list item that holds it.
A better, more accessible solution than display:none;…
The next line however is a point of interest. Usually, most people would use display:none; to hide the dropdown while it’s not being used, but due to a lot of screenreaders ignoring anything with display:none; applied, this is very inaccessible. What we do instead is take advantage of the fact the <ul> is absolutely positioned and just position it -9999px off screen when not in use.
Next up we declare opacity:0; for the hidden <ul> and then a Webkit only declaration which will smoothly fade the <ul> in from fully transparent when hovered.
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
Above: The 1px gap achieved by the padding-top:1px; applied to the list-item
Here we set up the default list item and link styles. Notice the padding-top:1px; on the <li>. As all the colours etc are applied to the <a>, putting a 1px padding on the <li> in effect pushes the <a>—and therefore the colour—away from the edge of the list item, giving it the illusion that they are all separated. Interestingly, IE will not recognise the layout of the <li> when hovered, closing the dropdown again. To get round this, I added a 1×1px transparent gif image as a background. Also here we remove the floats applied earlier.
Next, on #nav ul a, we apply white-space:nowrap; to prevent items wrapping onto two lines, ensuring a consistent display.
And this is where the magic happens…
The final bit of code is the bit that actually makes the dropdown appear when the list item that contains it is hovered. Now, as the :hover pseudo-class only works on the <a> element in IE6, the dropdowns won’t work in that browser. That can be alleviated by using a variety of fixes. However, as dropdowns are progressive, then we’re okay with them not working. If you do however want to get this working in IE6 then my favoured solutions is by using behaviours.
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}This gets tricky, but it should make sense.
This block of code here is where the hover styles come in, there’s a bit of nifty code in there which controls what we’ll call ‘persisting hover states’ on the top level item even when the user is hovering the dropdown items…
#nav li:hover a is what allows you to give the top level link a persisting hover state when hovering its ‘children’. This works by styling every link inside a list-item when that list-item is hovered. This bit gets a bit tricky but bear with me:
- The dropdown
<ul>sits inside an<li>. - If you are hovering over a link (
<a>) in a dropdown (<ul>) then you are also, at the same time, still hovering the top level list-item (<li>) as you are hovering content inside it. - Because you are technically still hovering the top level list-item, the
#nav li:hover aremains true, leaving a persisting hover style on the top level list-item’s<a>so… - …by hovering a dropdown item you are still hovering the top level list-item which means the cascade still styles all links in that list-item. Phew!
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}Here we override certain aspects of the persisting hover state so that the dropdowns differ from the top level link. In this case we merely decide not to underline them.
We also add a touch of Webkit goodness, telling the links to transform. -webkit-transition:-webkit-transform 0.075s linear; tells Webkit to animate the -webkit-transform we apply later on in the code over 0.075 seconds with no fade-in/out. Look out for the initiation of this in the next (and final) block of CSS.
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}Final word
So, there you have it. A simple concept pulled off with some very lean markup and some clever CSS and progressive enhancement. It’s totally accessible, the markup is semantic and sensible and it relies on no weighty Javascript libraries to work.
Hopefully my write-up makes sense. but if anything is unclear leave a comment and one of us in the dev team will try and set you right. Or, you could just copy/paste the code and hack it apart for yourselves.
By Harry Roberts on Thursday, February 17th, 2011 in Web Development. Tags: CSS, CSS3, HTML | 69 Comments »
+
Nathan said on 17 February, 2011 at 8:06 pm
Awesome! Was just working on a JavaScript solution for a project and I think I’m going to go with this construct instead. Thank you!
Using just the mark-up you’ve set here, the nested list items aren’t lining up correctly during the hover state. I’m too much of an HTML/CSS newb to figure out why and where to adjust though. Any thoughts?
DuMaurier said on 18 February, 2011 at 2:32 pm
I created something similar but added some CSS3 to animate the drop down. Let me know what you think. Obviously, the animation only works in WebKit, Firefox 4 and Opera.
http://vogtjosh.com/nav/
Cynthia said on 18 February, 2011 at 6:14 pm
I noticed on IEs, that you pretty much cannot hover below the first item in the dropdown before the dropdown disappears. You can, but you have to be quick about your movements otherwise it disappears. So this almost renders the dropdown useless for any IE user who isn’t willing to figure out how to “trick” this dropdown into working. I’ve noticed this same problem on a lot of dropdowns, and I’m not sure what it is that’s causing it not to allow time to move onto the next item.
Nick said on 19 February, 2011 at 9:23 pm
@Cynthia
I’ve noticed the same thing in IE. I believe it has to do with the not expanding to encompass all of the tags, so in the margin between list items, the mouse is no longer in the tag, so the dropdown dissapears. That’s my very unprofessional opinion.
Damon said on 21 February, 2011 at 12:35 pm
@Cynthia -
Nick is right. The spacing between the list items is just that – space – and if your mouse is hovered over that, it’s no longer on a list item, removing the dropdown from view. If the spacing is not their, it works fine.
Steve Hickey said on 22 February, 2011 at 3:15 am
great article, thanks for the explanations. I’m running into one small problem with my implementation. my #nav li items have a specific width set so they are all the same, and this width is applying itself to the dropdowns. I can override them later in the style sheet you set, but this makes them all the same width instead of allowing their width to be determined by the widest item in them. is there any way you know of to get around this other than applying classes with specific widths? I want to avoid that for the sake of flexibility
Alex said on 24 February, 2011 at 4:12 pm
Thanks for the walkthrough. I’ll be using SuperFish to overlay this with javascript. I’ll post it when I get it up.
Hugh said on 1 March, 2011 at 2:27 pm
Hi,
I just looked at your article on the drop down menu – awesome. I am not experienced in this stuff so it’s a little hard to get my head around it. I was hoping that you could help me with a question.
All of the links, the top line and the menus that drop, are spaced equally apart. I have a situation where the distance between link one and link two might be 100px, but the distance between link two and three may only be 80px. Can I achieve this? Or would it have to be separate menus?
I really appreciate any help you might be able to give.
Thank you!
Hugh
alex08 said on 8 March, 2011 at 10:38 am
I just looked at your article – awesome. A couple of days ago I run into one small problem with my implementation of a drop down menu.
I find it easy to understand and very well explained.Keep up the good work :)
Thanks for sharing.
alex
Lisa said on 9 March, 2011 at 2:19 am
Hi Thanks for the info. Do you know how to make the hover state persistent when the particular page is displayed. For example once you go to a page in the navigation – say it is ‘contact us’ then the navigation button ‘contact us’ stays in the hover colour. Once you move away from ‘contact us’ the next page displays the consistent hover state of the selected page.
I would love it if you could help on this!
Eric said on 12 March, 2011 at 7:33 am
Thanks for this! I am having one small problem though. I started a HTML document and a new style.css sheet. I put the two blocks of code in their respective places.
It works great except the drop downs and off set from their parent list item. So for example, when mousing over Services, the drop down list is bumped over to the right by about half an inch. In the demo version, the edge of the drop down is aligned exactly with the edge of the parent item.
Any help or direction on where to start fiddling would be great.
Thanks
Eric said on 12 March, 2011 at 8:19 am
Sorry for the double comment, but I wanted to clarify that I have tried this multiple times. Both in new blank HTML/CSS documents and into copies of my existing site. Same thing occurs. I’ve tried copying the code listed in the article as well as the code from viewing the page source.
It all works great except for the alignment issue…
Thanks!!
Mike said on 15 March, 2011 at 12:49 pm
Hey,
first of all – thanks for sharing :)
I’ve run into a problem though… I’m currently developing a WP theme, and simply when i put your
/* dropdown */
#nav ul
the whole nav disappears. Would you mind helping me with any solution?
Thanks in advance,
Mike
Dillon said on 18 March, 2011 at 1:03 am
Eric,
I had the same problem. I fixed it by adding some css for lists. Try putting this into your css:
ul, li
{
margin:0;
padding:0;
}
Sid said on 9 April, 2011 at 3:21 pm
Thanks mate! Swish CSS only menu solution!
James Clontz said on 12 April, 2011 at 2:23 am
http://thesoulofashark.com/
So I utilized your code on my website, but the drop down menus don’t line up vertically.
Lynn said on 13 April, 2011 at 12:20 pm
I’m using ie8 copy and pasted your exact code. Menu doesn’t drop down. Working fine in firefox. Is there something missing? from what is display on the copy/paste version versus the demo version?
dp said on 15 April, 2011 at 9:18 pm
Hover over in IE will disappear in between items. To fix this, you can add a background to the #nav ul li tag.
Thanks for the post
IT-Monkey Pete said on 18 April, 2011 at 10:14 am
I have a nice little work around for the disappearing menu / spacing issue in IE…
replace:
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items
*/
float:none;
}
with:
#nav ul li{
padding: 0; margin: 0;
border-bottom: 1px solid rgb(255,255,255);
border-bottom: 1px solid rgba(255,255,255,0);
float:none;
}
The trick is to use a 1px totally transparent border to create the spacing effect!
Let me know if works for you guys!
Paul Holtzheimer said on 19 April, 2011 at 1:53 am
I want to use your construct of drop down menus. I’m using Windows 7; IE9; and Frontpage.
However, when I directly copy over the source of your example, I don’t get dropdowns, I get a vertical list showing the preliminary title for the list and under it the “link” for each:
title 1
link 1
link 2
link 3
title 2
link 1
link 2
link 3
Can you give me some advise as to why it’s not working? Thanks!
Paul Holtzheimer said on 19 April, 2011 at 1:54 am
Thanks for sharing by the way. It’s really appreciated.
nathan said on 27 April, 2011 at 2:07 am
Trying to work my way through the sample but I’m just getting a vertical list of all the links.
I noticed that the demo at the top of the page works but the sample linked to at the end of is broken with the same problem I’m having.
John Darling said on 9 May, 2011 at 4:32 am
Well done Harry, thanks for the tip about whatever:hover very useful! One comment I have to improve the semantic markup of this menu, would be to wrap the the entire menu with a
<nav>element. If you are gonna use css3 might as well use a little html5 markup to round it out :)John Darling said on 9 May, 2011 at 4:43 am
Oh and you can remove the -webkit-border-radius, Chrome and Safari now accept the standard css3 property “border-radius”. That should save another few lines of code :)
drewber09 said on 17 May, 2011 at 4:27 pm
To Fix the IE7 issue were going past the first record causes the list to be removed.
Add
background-image : url(../images/SP_main/1×1-pixel.png);
with a 1×1 transparent image to the
#nav ul {}
This was found on google for this exact type of control.
Seems ie7 doesnt handle background: Transparent very well.
If it is a solid color it works the same but who wants color. :)
Gemma said on 18 May, 2011 at 10:26 am
Hi I really like this and I was just wondering if you had any tips on how to make this go down another level so you would hover over Services > Service One > Service Two. Hope that makes sense and any help on creating that is appreciated.
Kev said on 18 May, 2011 at 3:49 pm
Works great.
Would be even better if it had sub menus in the dropdowns.
Has anyone managed to get that working?
I suspect adding…
#nav ul ul { }
#nav ul li:hover ul { }
…with appropriate code so it appears next to the link in the dropdown would get that to work but been unable to get it working at all.
Josh said on 20 May, 2011 at 1:25 am
I was having the issue with the misalignment of the dropdown menus also. I’m not sure if this will work for everyone, but I added “padding: 0;” to my #nav ul section and it fixed the issue. Here’s the exact section of code as it appears now:
#nav ul{
padding:0;
list-style:none;
position:absolute;
left:-9999px;
opacity:0;
-webkit-transition:0.25s linear opacity;
}
Jim said on 5 June, 2011 at 1:01 pm
i’m having problems trying to center the menu… can anyone help me?
Jim said on 5 June, 2011 at 1:36 pm
Nevermind..i found the solution…just add this to the css code
.wrapper {width: 500px; margin: 0 auto}
And put the ” … ” tag inside this tag:
“….
The width in wrapper can be modified as you need.
Pete said on 8 June, 2011 at 9:53 am
This is great and people’s comments have really helped me.
Now I’ve put some content below the menu, I’m finding the dropdown items go ‘behind’ the position of the next positioned div and don’t get the mouse focus.
I’ve got myself into a bit of bind here by using the lists nested in other positioning css elements, but it seems that you have to be careful of what container the text is in if you want the menu to ride over it.
Sorry if that’s not clear – I’m a diy-er not a developer.
Zoe said on 13 June, 2011 at 7:44 am
@Pete- giving the nav id a higher z-index fixed that for me.
MikeD said on 28 June, 2011 at 3:37 pm
Hi,
I noticed you add some code other than what you show to display your Demo by looking at the source of that page.
What exactly keeps the menu items in a fixed position, even when the window width is smaller than the menu width.
I cannot keep my menu fixed when a users resolution is low or when they have the page opened in a small window.
Thanks!
Kevin said on 29 June, 2011 at 12:22 am
I have implemented this wonderful concept into a development website and I am also using AJAX calls to replace content which is unfortunately underneath the drop down menu. Other javascript menus hide themselves upon the click event, or at least go away with the page refresh. Such is not the case here so the user experience is a little weird with the menu staying put. I have not been successful in applying any sort of javascript function to hide the drop down elements. How can I stop the hover?
imbritney said on 11 July, 2011 at 7:02 am
@Gemma & Kev -> I think I got the three-layer menu to work using the following:
#nav ul, #nav:hover ul li ul, #nav:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 180px;
}
#nav:hover ul li:hover ul, #nav:hover ul li:hover ul li:hover ul {
position:absolute;
display:block;
left: 182px; top: 32px;
}
#nav ul li ul, #nav ul li ul li ul {
clear: left;
margin-top: -30px;
}
I know, I know, I went back to display:none and display:block, but it was easier for me to follow. I still need to add back in the invisible padding to make it work in ie…
Charlotte Quest said on 17 July, 2011 at 7:24 pm
I like your drop down menu. But I would like to know how to add third level sub categories?
chris said on 22 July, 2011 at 10:45 am
great drop down menu and instructions… tweaked it slightly to what I wanted and works perfectly :)
only problem I had was that the drop downs were aligning 40px to the right… so using the following suggestion off josh did the trick:
“#nav ul{
padding:0;
list-style:none;
position:absolute;
left:-9999px;
opacity:0;
-webkit-transition:0.25s linear opacity;
}”
Cheers!
Cristina said on 27 July, 2011 at 1:40 pm
Hi.
The article above is a bit too much for me :P I mean yeah I do undestand the basics and if I had time I would suss it out entirely. But I’m a bit anxious to finish a project.
Of all things, I love the simple ones even though they sometimes don’t look as good. I have therefore set up a menu with a similar markup as the example:
Item one
item one variant one
item one variant two
item one variant three
item two
variant 1
variant2
variant3
variant4
The classes are controlled via an external css page. That’s also where I have entered the folowing:
#navigation li ul
{
display:none;
}
#navigation li:hover ul
{
display:block;
}
In firefox, it works like a charm. But seemingly IE7 (the one I’m testing with) simply does nothing other than display the items without the variants, in spite of hovering over the items.
Before you ask: I like my ’solution’ better because it works (somewhat :P) and because it’s completely devoid of graphical ‘tassels’. I could of course chew through the code above and ‘produce’ something akin, but…. I’ve an issue with using something someone else has made. I wanna do it meself. And thus far what I’ve done works. For Firefox. I’ve only begun coding like 2 weeks ago (yeah I promised my guild master a completely new guild site) but the more I code, the more I realize that IE is…. well…. an ms thingy and as such it only does whatever it wants to do and…. (enter here the typical frustration everyone has experienced at least once in a lifetime when facing the monumental you know what of MS :P) I am quite sure you are catching my drift.
So my question is: do I always have to talk differently to IE (like opacity or gradiented backgrounds)?
Yeah I could tell people, look, if you use IE you won’t be able to navigate the page. But when it comes to people who play a daft online computer game, I am pretty sure they would not know what a browser is if it hit them in the face. Repeatedly. Like it does when they go to faceboo… you know what I mean. So, if possible, I would love to give them something IE can actually deal with? :)
Many thanks for the hand.
P.S.: I know, my style is a bit childish and all. Rest assured that I am not. Childish, that is. I can be serious (and swear in a very colourful manner at the unequity of programming) but I’d rather joke about and avoid unnecessary frustration :)
DanD said on 29 July, 2011 at 2:12 am
Great dropdown menu, well done thanks for sharing!
@MikeD, have you found a solution to
“What exactly keeps the menu items in a fixed position, even when the window width is smaller than the menu width.”
I’m experiencing the same problem. Using WYSIWYG program like Dreamweaver, menu position differs between design & live views. I’ve tried wrapping the entire html code above in a div with an absolute position but the dropdown menu will reposition about 5 px from the left & 5 px from the top when uploaded to my server as well as in live view.
Any suggestions?
Cristina said on 1 August, 2011 at 2:48 pm
Yup I think I might have found the solution. Or at least the explanation for the behaviour. I know it’s bad practice but at least for the time being I don’t set the doctype. Firefox seems to be flexible enough to allow the dropdown to work properly. IE however does not take kindly to quirky stuff. Oh well. :P
The Path said on 25 August, 2011 at 12:03 pm
Yeh IE is still so far behind in so many areas.
I had this problem recently and I think someone mentioned above that assigning a background image sorts it. So I added a transparent 1px X 1px png and repeated it across the background of the dropdown section (#nav ul ul).
Not ideal but hey it works. Feel like I spend half my time finding hacks for IE. I might bill Microsoft! ;)
Einsteine said on 6 September, 2011 at 2:48 pm
Hi! I have a problem using this. I’ve copy-pasted your code to test it.
When I test the menu in Chrome, Opera, Firefox it works great. When using IE8 it doesn’t work. The submenu are not displayed.
And here is another thing, when I test your demo on IE8 it works perfectly.
Could someone help me with this? Any ideeas why is this happening?
Einsteine said on 7 September, 2011 at 9:47 am
Found the solutin… I was missing the DOCTYPE line from my page.
Now it works fine. :D
Joanne McAlpine said on 19 September, 2011 at 2:14 pm
Thank you for this information, I will bookmark your page and I voted for you for the .net magazine awards – thanks again.
Dushan said on 21 September, 2011 at 1:38 am
I copied your code to test it. But sub menus are not displayed. I think it’s a problem with my browsers. I checked it in Chrome, Firefox 6, and even in Internet Explorer. And also some other CSS styles are also not displayed in my browsers. Can you help me?
kapil gupta said on 21 September, 2011 at 12:00 pm
Hi , I have applied padding zero through javascript as given below for IE 9 but padding is not set, its take extra white space below the text. its user control make in javascript and i am using the user control in a website.please help me.
selectBox.style.padding=0; // Not works in IE 9.
Thanks And Regards
Kapil Gupta
INDIA
Peter said on 23 September, 2011 at 12:58 am
The CSS works and is pretty standard, but it is awfully inefficient. Check out:
http://nekkidblogger.com/2011/ultra-efficient-css-html-drop-menu-nekkidblogger-menu/
Best,
Peter
Michele said on 23 September, 2011 at 6:23 pm
Thanks, Jim!
I was also having trouble dropdown list misalignment. #nav ul {padding:0} fixed it for me, too.
Regards,
Michele
Michele said on 23 September, 2011 at 6:56 pm
For those who are still having difficulty with the dropdown display disappearing when you hover the mouse, perhaps this is something:
I had trouble with this in Firefox (3.6.). It rather magically began to function when I added text-decoration:underline; to the #nav li:hover ul li a:hover. Although I am not sure why; just thought I would several things and this one worked!
Time to check other browsers now. :)
Cheers,
Michele
Jennifer said on 26 September, 2011 at 12:40 am
In cases where all the submenu items for a particular main list item are shorter than the main list item, the submenu does not equal the width of the main list item. This looks silly. Does anyone know how to get the submenu to be at least as wide as the main list item without having to define a set width for the submenus?
John Moriarty said on 27 October, 2011 at 7:41 pm
Can someone please help me out and tell me where I’ve gone wrong with my implementation of this code! I have gone through line by line but am darned if I can see a mistake! It works fine in Chrome but the drop downs will not display on IE (8 or 9) – I just can’t see where it’s gone awry.
http://j-moriarty.co.uk/cssdrop/index.html
Very grateful for any assistance!!
Olan said on 2 November, 2011 at 6:15 pm
I love this script, but I am havign trouble with cusomizing one aspect. I’d like for the top menu items themselves to not change background color/text appearance when the mouse rolls over them (just have the dropdown appear below). For the life of me, I can’t seem to make this work.
Any ideas?
John Moriarty said on 4 November, 2011 at 11:41 pm
@Olan you’ll need to modify the:
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays ‘hovered’ even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
entries as it’s those two bits that control the display of the menu item when you hover on it and when the sub menu is displayed. If you want it to not change from the non-hovered style then I suspect you can just delete the background color lines – or just copy what’s in the unhovered entries.
Can noone help with my IE implementation?! Still flumuxoed as to why it’s fine in Chrome but doesn’t display the sub menu in IE! http://j-moriarty.co.uk/cssdrop/index.html
Rebecca said on 9 November, 2011 at 7:44 pm
@John, I have found that it needs to have this at the top of the html page before the tag for it to work in IE
John Moriarty said on 15 November, 2011 at 9:28 am
@rebecca – your text didn’t display correctly, but you were completely right! The HTML header needs to start:
<!DOCTYPE html>
<html lang=”en”>
<
and it works fine in IE now! Many thanks indeed!
Michele said on 29 November, 2011 at 6:37 pm
Thanks again for the design!
At last, the new css dropdown menu up and running. The problem that ultimately held me up was z-indices. Even with background color the dropdown was not displaying in IE until I added ascending z-indices to every element of the nav bar css.
The tip that led me to this solution was here: http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
You can see my own dropdown here: http://cmrs.osu.edu/.
Good luck!
Michele
Jeff Kee said on 4 December, 2011 at 12:31 am
well written – I had a code of my own but I had trouble setting the width and all. Never thought of the nowrap solution.. duhhh haha. It’s great to have amazing resources like yours to reference to. Thank you very much!
D'oh said on 21 December, 2011 at 4:23 am
I’ve tried to implement this on a site I’m working on. It works fine in everything apart from IE7 and prior. I’m a little confused as your demo does work in IE7.
http://historyrepeating.org/upm/index.php
The services link should have a drop down but nothing displays in IE7.
If I zoom out it appears but the CSS isn’t functioning properly.
Any help would be appreciated.
D'oh said on 21 December, 2011 at 11:40 pm
I got it working using a behavior file called “whatever:hover.
More can be found here – http://divitodesign.com/css/how-to-dropdown-css-menu/ and here – http://peterned.home.xs4all.nl/csshover.html
Very easy work around.
Paul said on 9 January, 2012 at 9:01 pm
HI,
I have used this here, but for some reason I cannot fix, the dropdown hover moves when it shouldn’t. Any ideas?
http://www.sharksite.ca/sharktestsites/interpro/index.html
http://www.sharksite.ca/sharktestsites/interpro/interpro-style.css
Thanks
Ade said on 12 January, 2012 at 12:55 pm
I have used this CSS demo but i cannot get it to be horizontal my menu is vertical and to the left of the page, can anyone please help?
Simon said on 22 January, 2012 at 9:05 pm
This was so helpful and I always use this model now. Thank you.
But, if a nested page is ‘current’, how do I highlight the parent, ‘top level’, nav on the page ?
David said on 24 January, 2012 at 3:14 pm
I have the menus working. Thank you for the demo. I need to be able to disable some menus and re-enable via javascript. Is that possible and if so how? Thank you.
Aaron said on 28 January, 2012 at 12:03 am
I have IE 8. i wrote both css and html together in one file. the dropdown menu isnt working. can someone help me? i have spent 2 hr checking the code over and over. plz
Ron said on 1 February, 2012 at 1:10 am
I’m sure this is a quick fix but how can one remove the spacing between the drop links? I’d like to have one solid color behind the links.
Any help is appreciated!
MikeR said on 6 February, 2012 at 8:01 pm
I need a drop-down effect to appear but it must be enclosed in a (a button-bar …), and I cannot for the life of me get the pop-up to appear outside of that div. It is always clipped to the boundaries of it. I’ve specified “overflow: visible !important;” just about every place that I can think of.
Justin said on 11 February, 2012 at 12:45 am
Is there any way to create a dropdown that can appear over an AJAX/JS/Flash object (in other words, if your dummy content in the example were instead one of these file types, is there a way to set it to always appear above the object?)
Inayat Rasool syed said on 11 February, 2012 at 1:30 am
I have some strange situation. When I run this project on my personal computer it works fine in all browsers.
when I load it on Production Server, I can see the drop down menu in Firefox and Chrome but not in IE 7/IE 8. My project users dont use IE 9 so did not test on it.
Please let me know if anyone know about it. Thanks.
david said on 18 February, 2012 at 3:00 pm
works great and i am able to change elements like colour etc. but i would like to know what i will need to put in CSS/HTML to apply a third level sub menu. if anyone could help me on this that would be great!