styling a dropdown menu using CSS

Question

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

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;}

Answer 1

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.

Answer 2

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);
}

Answer 3

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

Answer 4

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)