Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made:
If you’re in a hurry, here’s the result:
HTML structure
As you can see in the following lines, the HTML structure does not contain more than we need, it’s a minimal one and easy to understand.
<ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Development tools</a></li> <li><a href="#">Web design</a></li> </ul> </li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
One more thing, also very important, this is semantic HTML. It’s a logical structure and has a correct meaning, even if styling is totally missing at this point:
Clean and accessible HTML structure
In my example, the “Categories” section is the only one who contains a sub-list, but you can easy add sub-lists to any item.
The CSS
/* Main */
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul li:last-child a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
Quite long list, huh? This is it…
CSS shape
You may have noticed the triangle shape that appears along with the sub-menu. That’s a CSS shape and its purpose is to increase usability for this CSS3 menu.
It’s made using the :after pseudo-element:
#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
Taming the IE6 “beast”
The sub-menu is displayed when hovering on a li element. As you already know, IE6 doesn’t support hovering on a non-anchor element.
Although, at the beginning of this article I said “without any Javascript”, in order maintain accessibility also for IE6, please allow me to add some scripting code:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
You may skip that, as IE6 is going down. The final countdown began!
The above solution requires Jquery. Also, I think this shouldn't be a problem at all, while, nowadays Jquery is almost "a default" when talking about modern websites.
Target IE6 & IE7 browsers
Besides this Jquery fallback, the above CSS includes some lines specifically for IE6 and IE7:
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
There are also other IE hacks that won't pass CSS file validation... If you don't like it this way, just use conditional comments!
The end (of this article)
Hope you enjoyed this tutorial, don't forget to leave a comment!
Later edit
Just as I promised, the CSS3 dropdown menu is now a multi-level one. Please check the demo page to see the updated version:
Another update
I took advantage of some free time and I updated the CSS3 dropdown menu demo:
Related content
A great demonstration of the power of CSS3!
I also like the implemented fallbacks for older browsers.
Kudos!
Ruud, thanks for your comment!
Thank u man for this codes, I’m newbie in coding and I’m learning, one problem I have with drop down menu is when I click on sub menu of drop menu it’s appears down of what I clicked, not at left as in your example. Can u help? (sry for my bad English)
Isoroku, you can send me an email with a link to your example (use the contact form). I think it will be easier this way to see the problem you encounter.
Thanx for this brilliant tutorial i realy like it . and m going to implement it on one of my client’s site :)
Sheheryar, nice to hear that. Thanks!
it just does not work, sorry pal
?? It’s working and very cool !
Thanks to Red ! My Collection !
It is very nice; to bad it does not support at least one more deepness level.
Thanks for your feedback Andrei, I will try to update this in the future.
Andrei, now it supports one more level, please check the demo!
This is really cool. Love it. Thanks so much for posting the details.
Thanks Kathleen, nice to hear that!
Thank you. This is such clean beautiful code, it inspires me to try hand coding my first drop down menu. Also, the little arrow is very cool for increased useability.
I also like that you include support for IE6; I may not like it, but poor people use it and need to use websites too. I will email back the URL of the site I implement it at!
Hey Dawn, thanks for your comment and good luck with implementation!
Nice tutorial, liked it
Thanks for your comment Mohammad!
thanking you regarding this articles
Please continue to send me this type of articles.
I am always waiting for you..
Thanks Raju!
Looks really nice. I tried getting the submenus to fade in with some code i got somewhere else, couldnt get it to work though.
-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
I’m really bad at css, any good suggestions on how to achieve this functionality?
Thanks Anders!
In order to achieve the effect you wish, you may try using opacity property instead of display:
#menu ul { opacity: 0; } #menu li:hover > ul { opacity: 1; -webkit-transition: opacity 1s linear; }For browsers like IE, don’t forget to add also a fallback.
Wow, best menu ever, and the best part of it is, this works fine in older versions of IE like IE6 and IE7 also.
May be this is happening because of jQuery but anyway, this is gr8!
Thanks!
Thanks Ashish, nice to hear you liked it!
cool
Nice one, thanks mate!
@uJuan and @tomsky thanks for your comments!
It’s cool but It’s not multi-level …
The next improvement: multi-level. Thanks for your feedback!
ggfan, the menu is now a multi-level one, please check the demo!
It’s cool, thanxs :)
Nice to hear you like it! :)
i love CSS3, i love html5, but i do not love IE.
Hehe, I guess that without IE would be no more fun :)
Nice article, will use it in some projects. Simple code, i like it. What do you use to test your code in IE6?
Thanks for reading it vitmel! I use IEtester for this because I find it very helpful.
Alternatively, I also use a Virtual Machine that runs Windows XP with default IE6 installed :).
Opera 11.10 supports linear gradient
background-image: -o-linear-gradient(top, #444, #111);
Thanks for great menu
Thanks for the tip, I updated it!
Good job on the code man…
Thanks for sharing :)
Thanks for reading, Vladimir!
that is so nice, adding to my bookmark
Thanks Mars, nice to hear you like it!
Most Awesome Tutorial by Red! You Guys are Fantastical and the best! Great Tutorial!
Thank you for reading, Sagu!
Great tutorial, its awesome.
Thanks @manish!
Hey Red,
Great Tutorial!
Thank you very much!
Question, what browser’s is the CSS code compatible with? Would you happen to know on hand?
Aaron, thanks.
Regarding your question, this is a cross-browser solution using progressive enhancement.
This menu, using the above Jquery lines, will work also on IE6.
Thanks for this great tutorial.
Thanks for your comment, nice to hear you liked it!
thx, great tut. i´ll be on it today.
Ricardo, thanks also for your comment.
Thanks for sharing! It nice! I like it! Good job :)
Kien, nice to you like it! Thanks for your comment!
Hey, nice work with this, it’s come in extremely handy for a project I’m doing right now! Thanks.
One question, I have a non-white background, but the menu seems to have a white background. Is there a way I can make this a different colour, so that it blends in with the background colour?
Thanks!
Shaun
Shaun, nice to hear you find this helpful.
There is no white background for this menu, so you shouldn’t encounter any problems when implementing it.
Thank you for the hack, I am Brazilian and I would love that you put a translator on your site, since agradesso ja!
Hi its nice tutorial… i want the submenu to display only onclick of the main menu… how to do it with jquery…
@Gunasegar, I hope you have good reasons to do that. :)
Technically, you’d need to remove the following CSS rule
#menu li:hover > ul {display:block}and use the above jquery code withclickinsteadmouseoverevent.This should work!
Yep i will try that…. am using this menu as a part of my topbar, where the submenu is not visible, hiding behind the top-bar… actually absolute position is notworking… any idea…
$(function() {
$(“#menu li”).click(function toggle(){
$(this).children(‘ul’).toggle();
$(this).toggleClass(“active”);
return false;
});
this jquery code is working…. and comment the
#menu li:hover > ul
{
display: block;
}
this hover property…
Now the problem is absolute position… i tried given the parent div position as relative but still i have the problem… any suggestions?
Gunasegar, check your styles again and if you still encounter problems, send me an email using the contact form.
I have a vertical menu on bottom left column . Can I change css3 menu to work as vertical . I also have another problem . I am using wysiwyg editor for existing left column menu but it does not recognise link to style sheet. I tried ref style in head of site and also in wysiwyg but does not work for either so I am using wysiwyg styles for now.
Gary, this menu can be easily transformed into a vertical one. You should just update some CSS lines like absolute positioning
topandleftcoordinates. Also you should remove some floats in order to transform the menu into a vertical menu.Regarding your WYSIWYG editor, I’m afraid I can’t really help you.
Good luck!
hi!
I modified the colours of the menu.in dreamweaver i see the modifiction but in a browser (chrome,firefox….) no.
plz help me
thanks :)
@alucard, Try to use Notepad++ for these types of modifications. It will work ;)
Is there any update on getting this to work correctly in IE 7?
This menu is already working correctly in IE7, if you need CSS3 rendering for IE6/IE8 you could try http://css3pie.com/
yeah, I just meant for the rounded corners…but i ended up using a hack to get the rounded corners…but the hack uses javascript, which I wanted to eliminate completely from the site
but just needed to make sure the site is accessible with or without javascript enabled…if they don’t have it enabled, square corners is fine with me…
good stuff anyway
This is really cool. Love it.
Thank you, nice to hear that!
Thank you gor the nice tutorial!
Do you know if there is a way to hide the menu when tapping outside on mobile Safari?
rriver, I’m glad you found this useful!
Regarding your request, didn’t tried it but I think you’d need some conditional JS (only for iOS). Then, using something like Jquery’s
event.stopPropagation()you could detect when the user taps outside the menu and hide the sub menu.Thank you very much for your resply!
I will give it a try and see if it works.
:) normally… i never stop to comment – but i saw that well, one, the stuff here is absolutely amazing, and two, you are one of the few people that actually respond to their users :D
great job, i cant/couldnt believe that something this spectacular was possible!!!! x]
very very gooooooooooood
thanks
I was wondering if this is under the Creative Commons license, or if I need your express permission to use this code? Thank you!
Damian, feel free to use this code as you wish. Also, a link back would be appreciated.
Ok, can do. Thank you!
Hello,
Love the menu and plan to use it even with the bug i have. You might be able to solve the bug, i have a fix i dont like but might use.
When going website link i attached to this comment. On products we have menu headers to specify a standard. It is just a plain “li” with out the “a” link as there isnt a page we plan to have for it. I lose the CSS up arrow shape on that drop down. I could put a “a” with a null so when clicked it doesnt go anywhere but i prefer the menu header not highlight like it does now as it doesnt represent a link.
Is there any way to fix the arrow or am i going to have to use the “a” null method to get the arrow in place?
Thanks,
Justin
Justin, sorry for my late reply.
You could use an alternative tag as a
span(styled the same as the anchor except the highlighting you want to be removed).I hope this works for you!
Hi, can you please explain to me why clearing the floated elements is necessary or perhaps why does the menu act the way it does (the background color does not take effect) when the clear fix is not applied?
And how does this look like in tablets or mobile devices?
Thanks. :)
Jan, clearing floats isn’t something new anymore and by not doing that, things like “the background color does not take effect” happen.
Here’s a good resource where you can read more about: CSS Floats 101.
Cheers!
Looks good in my website with my phone http://www.hybridlifts.com/position/index.html if you want to view what i got going
hi,
Thanks ! its very useful for people like me .
mubarak k k, nice to hear that! Thanks for reading.
Hi, hehehehe, i just make it work now, but i really would like the code for the multilevel menu, thanks very much, it was very instructive, i learn too much
thanks again
And I want the same
Angelo and Track, you just need to view the demo source for the multi-level code.
Outstanding menu. Looks pretty and works like a champ. It’s capable of customization as between top level menus and submenus, which is just what I needed. I’m a CSS noob and found it easy to deploy. Much easier to use with dynamically generated links than other menus I found, because it does not require you to use special class or ID tags for each level.
Thank you so much for designing this!
eal, it’s nice to hear that. Thanks for your comment!
It’s really awsoume thanx for sharing…!!
Thanks for sharing..!!!
Shreyas & Rahul, thanks guys!
Great content and good explanation as well. Thanks for sharing.
Friend i’m a new blogger. I’m interested to implement your drop down menu bar in my blog ,but i don’t know how to enter the css code and how can i get the output in my blog. please explain for me, what are the steps i have to follow to obtain the menu bar in my blog. I have no technical knowledge. Please explain for me step by step procedure for implement the above css code technique. If possible, send it to my mail….Help me friend. I am waiting for your reply.
Nathan, technically, this menu is not hard to implement as you probably read. Basically you’d need just to copy/paste the HTML and CSS above.
But, when it comes about implementing with a blog (which is a CMS), things can become a little tricky and you’d need to have some basic knowledge about web development.
Good luck!
Thanks frnd… i will try.
hey red , thanks for this . i’ll be using this one for my next project .
Thx buddy for this lovely dropdown menu. :)
Im adding this link in ma favourites n hope will implement it soon ;)
anyways reali gr8 post dude…
Henry, Balwan & Zestq thanks guys!
Hi Red,
Excellent code.
May I know how to center the menu? Thanks.
To center the menu bar, just set a
widthto the#menuand thenmargin: 0 auto.Hi Red,
Probably I need to elaborate. In your example, Home, Categories, Work, About and Contact are left alignment, whereas, I need center alignment.
I have tried your suggestion to set the width and margin, but no luck. Thanks.
http://jsfiddle.net/catalinred/DqvxR/
You owe me a beer! :)
Ha….. problem solved. Marvelous Red.
I should buy you a jug.
nicely done.. u are the man!!!
Thanks Erol!
Thanks a lot for this nice tutorial. Can’t wait to use it.
Carrie, nice to hear that you like it!
Hey just wanted to say thanks that’s great work! Got a quick question whats the > for in #menu li:hover > a ?
I’ve got a handle on basic css but I’ve never seen the > used before. Looking for some info or where I can learn about this.
Keep up the great work!!
Thanks Jeff, I’m glad that you like my work.
Regarding CSS selectors, you can read more here.
It does’nt work on internet explorer….and when i make a css whit that code it doesn’t work, but if i implement in the index it works…why? i’m new….
Thank you
Marius, it works on IE.
You probably have other things there, I’m not sure what you want to accomplish exactly…
when i make an external css with your code, it doesn’t work, but if i write that code in the html it work!
You are awesome man. I cant believe i can go this far with only CSS. I hate using images i navigation menus, so thanks for this great tutorial. I will use this in my blog at Blogger Tricks.
Majid, I’m glad you like it. ;)
Thanks for the code. It’s great.
So, I used your code and changed it a bit so I could use on my vertical menus.
But, I was unable to make the Sub-Menu appear after the button. I want it on the right. But, it keeps appearing on the bottom. I guess it is something on the code that you used to make it appear on the bottom, because your dropdown menu is for horizontal menus. Can you help me?
Daniel, I’m happy to hear you are using my menu.
To make it look better as a vertical menu, you may need to adjust the
leftandtopproperties for the#menu ul.Really good tutorial but cant get it to work correctly in ie7 or 8. changing z-index doesnt seem to help, think gradient or rounded corner hacks need adjusting? any ideas?
thanks
it was the pie.htc. will have to play around with that to get it working.
Adam, just follow the steps. The menu does well also on IE6/IE7/IE8. Good luck!
Hi, thanks for this wonderful tutorial
if you have only one sub Menu Item, the round corner effect is only for the bottom corner.
add this to you css and all corner will be rounded
#menu li:first-child:last-child > a {
@include border_radius(5px, 5px, 5px, 5px);
}
regards dino
sorry, forgot to remove SASS
remove
@include border_radius(5px, 5px, 5px, 5px);
and add
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
Dino, that’s a good point if you’re using just an element as a submenu. ;)
Didn’t work in IE 9 :(
Already fix?
Thanks a lot.
Best Regards,
Hélio
Hélio, the CSS3 dropdown menu does work very well on IE9.
Is just that CSS3 gradients feature is missing. The good news is that IE10 supports a lot of CSS3 features, including gradients.
Thank you for your answer.
If i change de css gradient to images, will it works?
Thanks again.
Best regards
Hélio
Absolutely, though I’d recommend you to stick to CSS3 gradients.
the style (css) is not in the same page by the rest of code.
(sorry my english)
Best regards,
Hélio
Hi again,
I tried for running in IE9, but the submenus do not work. Only the top menu appears.
In Firefox works fine.
Can you help me?
Hi again Helio,
This menu is working across all browsers, including IE9. Also, it works also on IE6/IE7/IE8. Please check your code.
I didn’t make any changes in the code…
The only diference is :
I put the css in a css file… the rest is the same… :(
Owa,
Thanks Man for Great And Good menu.
Aminul, I’m glad you like it. Thanks.
Hiya,
Really liking your design.
When I view the example it looks fine but when I create it mayself I dont get the rounded corner to the left of the menu.
Any idea why?
They are just straight.
Thanks
Mito, check your CSS for some
border-radius.I have been able to manipulate the width of the sub menu. Is there a way to get the menu to align left and have the little triangle come underneath the link?
DJEROCK, I’m not sure what do you mean exactly. Perhaps you can send a link with your attempt?
Good Share İt Now Started
hi and excuse me for my bad english
How to put the text in the middle of the menu and not to the left completely
thank you !
Hi cieux75, here’s an example I made before: http://jsfiddle.net/catalinred/DqvxR/
I hope that helps!
thank you Red !!!
it’s exactly what I want
You’re welcome, also you may check the latest version I made for this menu using CSS3 transitions.
Hi – great menu, thanks. Two questions:
1) does your menu system support titles of different lengths, without having to assume a maximum menu title width?
2) is there a way to always show when a menu item has a sub-menu? Currently, you only find that out when you mouse over the menu item.
Thanks
Mike, I’m glad you like this menu.
Also, regarding your questions:
1. Not sure if I got it right but I’m not aware of any menu length problem. The only
widthset for this menu is for IE7 and below (for compatibility reasons).2. This menu does not support that. But, it can be added by simply using a CSS class for the main items that contain a sub-menu. That class can display an arrow or something similar. I didn’t made that initially because I thought it would be quite redundant as the sub-menu already has something like that .
love the look, But what do I need to do to put a logo above the menu bar?
Let me explain that. I can add an image, but then IE makes your menu and the rest of the page move right of that first image.
Home
About……….
(followed by the rest of your code)
Btw looks awesome as is in firefox and opera
opps html code lost there.
table width=”950″ align=”left”
tr img src=”images/slogo.png” alt=”" align=”center”
/tr
/table
ul id=”menu”
li a href=”index.html”>Home /a /li
li a href=”about.html”>About /a /li……..
there (without the greater than and less than)
Hi,
your menu is great….but when i tried to use it then i face some problem…
i used this code for keep all web content in center place…
…
so can you please give me the css code of the menu sothat i can use the css “container” and can use the layer to place the menu in the right place?
one more help please…
i can’t understand where i put the extra code for IE 6/7…i tested this menu only working well in IE9
if you can put the code in the css then i will be very grate full to you…
please help me…i like your menu very much that way i am trying to use it…..
waiting for your kind reply… :)
Thanks
oli
Sorry…i can’t write code here so please check this link to see what i wanted to say
http://zoomlancer.ucoz.com/t_232.htm
thanks
oli
Oli, send a link to your attempt and I’ll take a look.
hi,
here is the page without menu
http://zoomlancer.ucoz.com/spdemo/demo1.html
all web contentment is in the middle point.
here is with menu the web content goes left corner…if you change screen reg:
it will go more corner..
http://zoomlancer.ucoz.com/spdemo/demo2.html
i find out the difference here…
http://zoomlancer.ucoz.com/spdemo/demo3.html
please check it…
waiting for your reply…
thanks
oli
In your example, just remove the
body { width: 960px }rule. Good luck with your project!Wow…thank you so much!!
perfect!
is there any way to keep the black bar?
let me know please…
Thanks
oli
Thank you very much for this! I’m teaching myself (by necessity as well as interest), and was looking for something that looks great, and that I could also understand! From a newbie point of view, the code is simple and elegant (as is the menu). A lot of tutorials I’ve seen have a whole lot of unnecessary divs and codey bits that I can’t seem to figure out what they do.
Also, thanks for the IE workarounds – that has helped preserve my sanity.
Thanks so much for sharing.
Regards,
Danni
Danni, thank you for your kind words. It’s nice to hear you like it.
the menu is great for what I need. thank you. the only problem I’m having is getting the 2nd tier sub menus to display to the right. they are appearing below on both IE , firefox and Chrome.
Never mind. I’m such a dork.. forgot the java… thanks again for such an simplistic looking menu. No way I could have built this with my skill set. Glad there are still people out there like you..
Hi Tony, I’m glad to see you’re using my dropdown menu.
Thank you also your kind words.
What do I need to change to make the menu look like the original. The demo is much more rounded and does not have the lines in between menu items. How can I add those back in? Thanks!
Hey, you need to send me a link in order to take a look on your example.
Thank you Red, it is a great tutorial. However with “copy and paste” I found two problems there. (http://sg-dvr.blogspot.com/)
1) 2nd level menu “Development tools” and “Web design” under “CATEGORIES” drop down properly but they are un-accessible when I try to move the cursor on them. I searched Internet and everybody says it is because of IE z-index issue. I tried to change z-index but it doesn’t work.
2) The trasparent 2nd level menu overlaps with the 1st level menu at the 2nd row. When I try to access “CSSSSSS” under “CATEGORIES” the 1st level menu “ABOUT6″ below “CATEGORIES” is selected instead.
Please help on these. Thank you.
I tested with Firefox. Everything is OK. Only IE8 has above problems. Even worse, those cool features are all gone in IE8. Since there are still quite a lot people using IE, could you please take a look and update your codes? Thank you!!!
Hey Tony, thanks for your comment.
Regarding the problems you’ve found: I never thought this menu will have 2 rows, never. Also, it does not look good either. :)
So, I’d recommend you to stick always to one row and you’ll not have any problems on IE8 and below.
Cheers.
Red, thanks, )-: though.
magnificent short cut to drop down menu. forget writing long java script, RED u showed me the power of CSS. Thnx
Nice to hear you like it! 10x
Hello!
I am a newbie in coding and I’m learning,i have some question for this menu.
The one:
I can not see the effect in IE6/IE7/IE8.But in FireFox I can see the result . I do not know why?
Hi, for IE6 there is a jQuery workaround. Check the short jQuery snippet above. There are no problems on other browsers, just check your code again. Good luck!
Dear Red
Thanks a lot for the above tutorial.
Finally I found a working tutorial in the net and it is yours.
For a beginner like me it is very important to have a “copy/paste/test/learn” type of tutorial.
I copy pasted your tutorial material and also from the source code of your demo page and “Hola”- it came out great.
Thereafter I jumped into the codes to see what has been put where and why.
This facility of “copy/paste/test/learn” tutorial provided by you had encouraged me to take more interest.
Many tutors would not even explain why he/she put a particular code in a certain but specific location. It is very frustrating to follow them even if they end up building great apps.
Thanks again.
Thanks for your comment. I appreciate it!
when i add a scroll bar to the sub menu, i lose the little triangle pointer. I tried changing code around to make it appear but no luck..
this is the code i added to the #menu ul
overflow-y: auto;
height:300px;
width: 250px;
also, how can i keep the main menu from changing size when i zoom in and zoom out? When i zoom IN, it bunches everything together. When i zoom OUT, it stretches the bar. I’d like it remain static, unchanging.
this is awesome. you are a legend. songs will be written about you years from now :-)
這實在是太神了！尤其是那個小三角形，這種 boarder 的活用，我這輩子也想不到吧！從這篇文章學到很多，萬分感謝！
Thanks a lot!
Hey Red,
I’m having problems getting the menu to work in IE, I’ve looked over the code as well as the JQuery info several times and I was wondering what you would recommend?
Cheers,
Craig
Craig, for IE6, please check if your code contain the above jQuery code, including the library inclusion itself:
Hello again,
I have re-added the jQuery code, however it made no difference. Any other possibilities?
thanks,
Craig
Feel free to use the contact form and send me more details (including a link perhaps).
This menu is wonderful. I am having some issues though. I am building a site with many pages and I have the menus on each one. I’ve moved the CSS code to it’s own .css file. On each of my pages I have the JavaScript tags in place so it works with IE, but when I load the site in IE, hovering over the options doesn’t bring up the sub-menus, and the black background doesn’t show. The menu works in all other browsers.
Any thoughts?
Alexander
Alexander, perhaps you can send me a link using the contact form. I’ll take a look.
Thanks Red, but I found the issue. I was looking around and IIS 7 has some funny personality traits.
I put this line of code on the top of my HTML page and just like that, IE works:
I was having problems getting the drop down menu to work under IE9. Both the background color, and the drop menu would now show up. It killed a good 3 hours of my day. Then I remembered a problem I had before where all I needed to do was change the doctype to strict, so I did and voila! It’s works perfectly now (minus the gradient). I figured I would post this and maybe help the rest of the people battling with IE9. Thank you so much for sharing your code!
Mychael, you can start using the new HTML5
<!DOCTYPE html>. Just forget about Strict or Transitional doctypes!Hello
I’m 15 and I’m a newbie in webdesigning.
Is there anyway I can center the ‘Home’ ‘Categories’ etc … in the grey rounded rectangle ?
Thank you by the way, your menu is awesome and I’m going to use it.
Hello Sweety, please check the comments above. I already made a jsFiddle with a similar request.
Thank you. But can you please point the differences ? I mean, in the first code, you use float, and now you use display.
By the way, is there a place I can put my code ?
Hi!!!
I have a problem when inserting the menu css code on my website, all other libraries stop working. could help make my website work properly?
Hi Heris, this CSS3 dropdown menu do not require any library so I don’t see what problem you may encounter. Send me a link though with it to take a look!
Hello again …
The problem is that when I insert the css code in the html of the website, the other effects stop working … this is the link:
http://www.zion-ndt.com/2012/index1.php
The menu works fine, link:
http://www.zion-ndt.com/2012/menu/menu.php
Thanks for your help
Heris, it appears that the menu.css file can’t be found. Fix/check your CSS file location. Hope that helps!
but not used as an external file, but in the same HTML code of the website
Using the same css I can just add a deeper level of submenus in the html?
I tried to do so but it showed the level below the menu, not on the right side.
Help here. Thanks. I really like how it looks.
Hey Frank, the menu already has three sub-levels. I would not recommend you adding one more.
If you still want that, you will need to add some more
ulrules.Hi Catalin
Nice dropdown menus. Just what I am looking for.
I was wondering how I can have a gap between the main menu and the dropdown. I have tried making top: 45px; in #menu ul This works fine, the dropdown comes down, but now I have problems fetching (hover over) the dropmenu when I move from main to the dropdown.
Regards
jonhard
faroe islands
Thanks for your comment Jonhard.
The fact is that you can’t add a gap there and still have the same functionality. Having no gap between list element trigger and the sub list is actually a trick that makes these CSS dropdowns possible. Hope that helps!
its really good tutorial
Los felicito por este aporte tan bueno, segui todo el tutorial y no genero ningun problema.. felicitaciones..
Fantastic great code, Red! You are very clever. I just wonder; are you able to guide me on how I implement this in a joomla-template?
Christine, I’m not a Joomla expert, but I’m sure you will not have problems with implementing this dropdown menu.
Basically, once you have a dropdown on Joomla, you just need to adapt these dropdown styles to fit.
Really a nice one to implement easily
I’m glad you like it, thanks!
Thanks for this tut. Even though I am using my own CSS menus, this tutorial helped me with first-child hover events. Thanks again!
Great article.
I am floating menu the main ul over a grey background having taken the dark background out and it looks very effective.
Thanks.