Vertical menu and sub items height

Hi! I’ve create 2 levels vertical menu:

http://muddydogpaws.com/development/wayfinder/examples/example-6.html

In CSS I’ve changed the style of the buttons, using a diffent height

/* style the links */
.menu2 a, .menu2 a:visited {
display:block;
text-decoration:none;
height:84px;
line-height:84px;
width:149px;
color:#b95826;
background:#ffffff;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
font-size: 14px;
font-family:Lucida Grande, Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #b95826;
}


It’s OK but I would like that subitems of each button has a different height: 30px for example


I’ve tried to change this CSS


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu2 ul ul {
visibility:hidden;
position:absolute;
top:0;
width:250px;
height:34px;
left:150px;
font-size: 10px;

}

/* make the second level visible when hover on first level list OR link */
.menu2 ul :hover ul{
visibility:visible;
width:250px;
height:34px;
left:150px;
font-size: 10px;
}


but I still show sub-items with the same height of father (84).... is it possible to have fathers with big buttons (height 84px) and childs with small height buttons (30px for example)?

Thanks

Yes, you just have to understand how to be more specific in the CSS. Each element in a directive is given "points", and the directive with the most points will take precedence.

So #menu ul.classname will take precedence over ul.classname.

http://htmldog.com/guides/cssadvanced/specificity/

Thanks for your reply!

and how Can I set 2 differents height (for father and childs)??

Thanks

ul = one height, ul ul = another height.

but it’s what I’ve done??? Or not??

this to see...


.menu2 {
position:relative;
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu2 ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu2 ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu2 li {
position:relative;
}

/* get rid of the table */
.menu2 table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu2 a, .menu2 a:visited {
display:block;
text-decoration:none;
height:84px;
line-height:84px;
color:#b95826;
background:#ffffff;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
font-family:Lucida Grande, Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #b95826;
}

/* hack for IE5.5 */
* html .menu2 a, * html .menu2 a:visited {width:150px; w\idth:149px;}

/* style the link hover */
.menu2 a:hover{
color:#fff;
background:#de946f;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu2 ul ul {
visibility:hidden;
position:absolute;
top:0;
height:34px;
line-height:34px;
left:150px;
}

/* make the second level visible when hover on first level list OR link */
.menu2 ul :hover ul{
visibility:visible;
width:250px;
height:34px;
line-height:34px;
left:150px;
font-size: 11px;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu2 ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu2 ul :hover ul :hover ul ul{
visibility:hidden;
width:200px;
height:34px;
line-height:34px;
left:150px;
font-size: 8px;
}
/* make the third level visible when you hover over second level list OR link */
.menu2 ul :hover ul :hover ul{
visibility:visible;
width:200px;
height:84px;
left:150px;
font-size: 8px;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu2 ul :hover ul :hover ul :hover ul {
visibility:visible;
width:200px;
height:34px;
line-height:34px;
left:150px;
font-size: 8px;
}

.clearfix {
clear: both;
}

:(( Why Can’t I do this??

it’s OK!!! I’ve resolved.... now my only problem it’s that I’d like to open sub-items on the top not bottom??

Is it possible??

Thanks