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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

==========

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related