styling a dropdown menu using CSS

Question

I have been trying to design a dropdown menu like following for my wordpress theme using CSS.

enter image description here

I have manged to create the dropdown but I cannot figure out how to create the curve using CSS and make the background color look transparent like in the image above.

To make it look transparent I tried opacity:0.4; filter:alpha(opacity=40); but it doesn't look near the dropdown menu above.

Could you please tell me how to make my dropdown look like the one in the image and make it responsive too?

Thanks

Here's my Code:

You can also check my code live here http://jsfiddle.net/MdpPd/

HTML

<nav>
    <ul id="menu">
            <li><a href="">Homepage</a></li>
            <li><a href="">Google</a>
                <ul class="sub-menu">
                    <li><a href="">About Us</a></li>
                    <li><a href="">Programs</a></li>
                </ul>
            </li>
        </ul>  

</nav>

CSS

#menu {
display: block;
float: left;
margin: 0 auto 0;
width: 100%;    
}

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: #108BB6;
}

#menu li {
float: left;
position: relative;

list-style-type: none;
}

#menu a {
display: block;
line-height: 2.4em;
padding: 0 13px;
text-decoration: none;
}

#menu ul li {
display:block;
clear: both;
width: 265px;
}

#menu ul li:hover {
display: inline-block;
}

#menu li:not(:hover) ul {
display: none;
}

#menu ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}

#menu ul ul ul {
left: 100%;
top: 0;
}

#menu ul ul a {
background: #dedede;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}

#menu a:link {color:black;}
#menu a:visited {color:black;}
#menu a:focus {color:black; background: #ebdb00;}
#menu a:hover {color:white; background: #0C6481;}
#menu a:active {color:black; background: #ebdb00;}

Your question is too broad. In general, you should look into CSS shapes and RGBA colors — Boaz
– Boaz, Commented Aug 22, 2013 at 11:56
I am thinking of offsetting each children progressively, and then using CSS borders to create those triangles... And yes, you will need to rely on rgba() background-colour to have opacity in the background but not in the content. — Terry
– Terry, Commented Aug 22, 2013 at 11:58
@Boaz Thanks for your reply. I visited css-tricks.com earlier and tried Parallelogram code but the result was horrible. You can see it here: jsfiddle.net/H8BLE :) — black_belt
– black_belt, Commented Aug 22, 2013 at 12:08

GreyRoofPigeon · Accepted Answer · 2013-08-22 12:21:31Z

3

I created the effect on the submenu using :before and :after.

Take a look at the demo.

It isn't the cleanest solution, but it works. It needs some adjusting from your side, but I hope this helps you on the way.

answered Aug 22, 2013 at 12:21

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

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

1 Comment

black_belt Over a year ago

Thank you very much LinkinTED Your code has given me a good start. Lets see how can improve it more :)

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-08-22 12:03:13Z

1

For giving curve to the Border you can use the

"border-radius" property in css. like

border-radius: 5px; you can also use the border-(left,right,top,bottom) variations.

For giving the opacity to items

try giving color as "background-color: rgba(Redvalue, greenvalue, bluevalue, opacity value)".

like

background-color:rgba(0, 255, 0, 0.8)

answered Aug 22, 2013 at 12:03

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

Jimmy Obonyo Abor · Accepted Answer · 2013-08-22 12:09:32Z

0

for the class=submenu use the below code to brig the skew

.submenu
{
   transform: skew(30deg,20deg);
   -ms-transform: skew(30deg,20deg); /* IE 9 */
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

the submenu would also use opaicity setting as you had already put ,to brig about the color just use background color you would like as in

.submenu{
 opacity:0.4; filter:alpha(opacity=40);
 background:blue;

}

to bring about responsive layout simply use common frameworks eg twitter bootstrap,project zurb

answered Aug 22, 2013 at 12:09

Jimmy Obonyo Abor

7,92510 gold badges48 silver badges72 bronze badges

1 Comment

black_belt Over a year ago

Thanks for your reply. I tried your code but the result is this: i44.tinypic.com/1zg57jk.jpg :) thanks

tolanj · Accepted Answer · 2013-08-22 12:12:48Z

0

For the skew 'the curve' see http://www.w3schools.com/css3/css3_2dtransforms.asp skew function

For the transparency: the example is less transparent (more like 0.9) and a lighter blue. You could try asking the artist/designer as they probably know this

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: 10aBd6;
opacity: 0.9;
transform: skew(30deg,0deg);
-webkit-transform: skew(30deg,0deg);
-ms-transform: skew(30deg,0deg);
}

should get you going, you'll need to 'unskew' the Text inside

#menu ul li {
display: block;
clear: both;
width: 265px;
    transform: skew(-30deg,0deg);
    -webkit-transform: skew(-30deg,0deg);
    -ms-transform: skew(-30deg,0deg);
}

edited Aug 22, 2013 at 12:12

answered Aug 22, 2013 at 11:55

tolanj

3,74418 silver badges32 bronze badges

2 Comments

Jimmy Obonyo Abor Over a year ago

id say ,a perfect solution for the skew!

tolanj Over a year ago

Put the link out there while I was writing it since, well, its 90% of that part of the answer!

Collectives™ on Stack Overflow

styling a dropdown menu using CSS

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related