CSS dropdown menu design

Question

I have a requirement where i need to work on a menu which should look something like as shown in image below Sample

I have worked in the past on simple down-down menu, but this time the requirement is a bit different. Top Menu links should change color to blue on hover & when on that particular page.

Sub menus should come in while color & the background image used for sub-menu should be transparent & submenus should show a pointer towards parent menu as show in image below.

I have looked for similar menu example so that i can replicate but i was not lucky to find one.

I would appreciate if someone can point me in right direction.

Or help in in doing it.

I have also set up an example on jsFiddle but I need to add an additional feature like i mentioned above.

http://jsfiddle.net/4wrDx/

meanwhile i will also try to work on to see if i can manage it. I am not a CSS guru i am more of a developer who manages design work also. I need this for asp.net webform based website.

Code sample

<body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav> </body>

UPDATED:

I have managed to get so far. Please check the link http://jsfiddle.net/4wrDx/10/

Thanks Mr. Umer, I have cant see pointer on top of first child. — Learning
– Learning, Commented Aug 1, 2013 at 7:31
I mean i am looking for something like this jsfiddle.net/4wrDx/11. I am working on it to get the other features like active link color change. What i have done is more close to what i want to achieve. — Learning
– Learning, Commented Aug 1, 2013 at 9:50

Rohit Azad Malik · Accepted Answer · 2013-08-01 05:59:25Z

2

Used to this Css *RGBA*

nav ul ul { background: rgba(0,0,0,0.2); // used to RGBA border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li a:hover { background: rgba(0,0,0,0.4); // used to RGBA }

Demo

==========

Updated For arrow

nav > ul > li > ul:after { content: ""; border-left: solid 20px transparent; border-right: solid 20px transparent; display: inline-block; border-bottom: solid 20px rgba(0,0,0,0.7); position: absolute; top: -19px; left: 0; }

Updated Demo

edited Aug 1, 2013 at 5:59

answered Aug 1, 2013 at 5:39

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mowwwalker Over a year ago

Not ie8 compatible though. Try the converter here: kimili.com/journal/…, mentioned in this answer: stackoverflow.com/a/3977240/828584

Learning Over a year ago

Thanks your other demo is fine but how can i add pointer on top as show in example image of my question.

Learning Over a year ago

Thanks Mr. Azad, You seem to be a Design Guru, Can i ask you an expert opinion, 1. Can my sublevel menu have different color then Top level menu. 2. Can i change the color of Top Level Menu when it is on that particular page or active link for example.

Muhammad Umer Over a year ago

i suck at understanding others' code, therefore i had to write my own. :D But yea you can do anything in css(like change color). Except making shapes, masking, filters, and pixel by pixel manipulation. But its coming maybe in next 5 years.

Collectives™ on Stack Overflow

CSS dropdown menu design

1 Answer 1

==========

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

==========

4 Comments

Linked

Related