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

CSS Dropdown menu issues, vertical align

CSS Dropdown menu issues, vertical align

Problem

im trying to horizontally and vertically align my top anchor tags in my list. http://jsfiddle.net/Hk7HC/

But I'm having a nightmare trying to do it. Also my drop down to the right of 'Advantages of listing' jumps up to the top of the list..arghh! Any help would be greatly appreciated :)

 


/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    height: 3.5em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61)
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:3.5em;
     background-color: rgb(255,194,14);
     display: table;
}

#nav ul {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     background-color: rgb(255,194,14);
}

#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited {
    display:block;
    padding:0px 5px;
    text-decoration:none;
    background: #b95d73; /* Old browsers */
    color: white;
}

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
    display: block;
    padding: 0px 5px;
    text-decoration: none;
    color: inherit;
}

#nav li.rhombus:hover {
    background: #b95d73;
    color: white;
    text-decoration: none;
}

#nav a.linkchild:hover {
   background: rgb(118,0,18);
   color: white;
}

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

#nav > 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);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 3.5em;
}
#nav > li.rhombusStart {
    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);
    border-right: 1px solid rgb(239,89,24);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;

}
#nav > li.rhombusEnd {
    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);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;
}   

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

    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

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:3.5em;
    left:0;
    width:15em;
    display:none;
}

#nav li ul a {
    width:15em;
    float:left;
    border-bottom: 1px, solid, rgb(145,0,34);
    border-top: 1px, solid, rgb(178,77,101);
    display: block;
    line-height: 2em;
    text-align: left;
    display: table-cell; 
}

#nav ul ul {
    top:auto;
}

#nav li ul ul {
    left:15em;
    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;
}

img.arrow 
{
    float: right;
    vertical-align: middle;
}
Problem courtesy of: davey

Solution

Giving your parent level anchor's a line-height that is the same as the height of the nav makes the text vertically centered.

line-height:3.5em;

see updated jsfiddle here: http://jsfiddle.net/Hk7HC/4/

Also to fix your flyout menu, remove the top:auto and use margin-top like this:

#nav ul ul {
//removed top:auto
}

#nav li ul ul {
    left:15em;
    margin:8px 0 0 10px; //adjusted top-margin to 8px
}

See working example with vertical alignment and flyout fixed: http://jsfiddle.net/Hk7HC/8/

Solution courtesy of: Moin Zaman

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 Dropdown menu issues, vertical align

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×