Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Drop down menu with skewed first layer

CSS Drop down menu with skewed first layer

Problem

Im trying to create a menu with drop down options. The trick is the first level of options are skewed and the child elements should not be . I cant unskew the links a hrefs in the parent without unskewing the the parent list tag..


      

CSS:

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;

 }

#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#00ff21;

 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

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

}

li.rhombus{
    float:left;
    position: relative;
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
}

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
}
#nav li ul a{
    width:12em;
    float:left;


}

#nav ul ul{
    top:auto;
    }

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    transform: skew(-0deg);
    -webkit-transform: skew(-0deg);
    -moz-transform: skew(-0deg);
    -ms-transform: skew(-0deg);
    -o-transform: skew(-0deg);

    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
Problem courtesy of: davey

Solution

Simply add a new element and specify the transform-origin (example).

New HTML

Add a around the text of each of the .rhlink anchors.

New CSS

Basically, you just have to skew() the newly added and specify the transform-origin to get the submenus to line up. The negative skew() can't be used on the anchor itself because the anchor contains the visible content (border and background), so it would look like no skew was ever applied. Adding the child lets you keep the background/border and :hover effect.

#nav,
#nav ul {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
}

#nav a:link,
#nav a:active,
#nav a:visited {
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#00ff21;
}

#nav a:hover {
    background-color:#fff;
    color:#333;
}

#nav > li {
    float:left;
    position:relative;
}

li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
}

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
    display:block;
}

li.rhombus > ul {
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(-35deg);
    -moz-transform:translate(0,1px) skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
}

#nav ul {
    position:absolute;
    top:1.5em;
    left:0;
    width:12em;
    display:none;
}

#nav li ul a {
    width:12em;
    float:left;
}

#nav ul ul {
    top:auto;
}

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul {
    display:none;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
    display:block;
}
Solution courtesy of: 0b10011

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Drop down menu with skewed first layer

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×