Comments on: Easy CSS Dropdown Menus

By: hyip

hyip — Thu, 26 Jan 2012 11:47:51 +0000

Easy CSS Dropdown Menus I was suggested this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You are incredible! Thanks! your article about Easy CSS Dropdown MenusBest Regards Shane

By: jagdeep

jagdeep — Tue, 24 Jan 2012 06:11:31 +0000

Thanks
you have save my time

By: laura

laura — Thu, 12 Jan 2012 18:33:10 +0000

I want to set the opacity of the dropdown background without affecting the text. is that possible?

By: Putri

Putri — Wed, 11 Jan 2012 01:57:24 +0000

This tutorial making me more understand how to making css menu dropdown thank you

By: bsmith

bsmith — Wed, 14 Dec 2011 10:41:25 +0000

I like it but this may seem like a silly question (I’m new to to CSS coding) how do I make each top level option be a different colour? and their children follow in the same colour as it’s parent?

By: Scott

Scott — Wed, 30 Nov 2011 20:33:04 +0000

After looking aound for weeks this is easily the best tutorial on creating pure css menu’s for a noob. Will bookmark this page forever. Thank you! Have saved me a ton of time – for some reason menus are the hardest part for me.

By: Week 13 « 39AK Creating Web Interfaces

Week 13 « 39AK Creating Web Interfaces — Thu, 17 Nov 2011 17:24:43 +0000

[...] Easy CSS dropdown menu [...]

By: Bob Burke

Bob Burke — Thu, 10 Nov 2011 23:33:52 +0000

I had been trying to integrate a pull-down menu into a demo site. I’m new to css and had tried several different pieces of this type of code, but nothing worked (the drop down would show on hover, but would disappear when I moused down). For everyone in the same boat, here’s what’s happening, and it may not be obvious. More than likely, you have something directly below your nav links. What’s happening is that the sub menu is behind this lower content, even if you can see it. You can tell because you may be seeing this content (text or whatever) covering up part of the sub-menu. Even if you can’t see anything obscuring the drop down, it probably is. When you mouse down the list, it thinks you’ve moved your mouse off the list, because you’re now mousing over the lower content. The fix, as was mentioned toward the end of these comments, is to set the navigation to a higher priority than the other elements. There is a css property called the “z-property” which is the stack order of elements;
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I changed this particular code as such, and it finally worked (yes, it took me one whole day to figure this out!) Hope I just saved someone from the insanity I’ve just been through.
I don’t know what the numbers mean, but assume larger is topmost stacking order. I also tried the -1 as suggested and that didn’t work. Just stuck a “7″ in and it worked.

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index:7;}

By: HostMonster Coupon

HostMonster Coupon — Thu, 10 Nov 2011 05:19:04 +0000

I like your website, have you considered adding and RSS feed feature? That will allow me to get automatic updates of new websites. If you set up updates via RSS, please email me! I will favorite your topic for now. Again Excellent site!

By: eminis

eminis — Thu, 10 Nov 2011 05:13:51 +0000

My Trackback…

[…]With sufficient thrust, pigs fly just fine.[…]…