ciao,
ho questo menu orizzontale con submenu a 2 livelli.
utilizzo in line-height e height per centrare le voci di menu all'interno del div.
Dato che uso una larghezza fissa per il div delle voci di menu, se queste sono più lunghe mi vanno a capo e questo mi va anche bene.
il problema è che
1) quando mi va a capo, la parola esce dal div, presumo a causa del line-height.
2) sempre a causa del line-height, tra la prima e la seconda parola, mi ritrovo con un interlinea troppo grande.
questo è il css:
codice:
#menu {list-style-type:none; padding:0; margin:0 0 0 3px;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#cdc; margin:3px 3px 0 0; border:1px solid #000; width:119px; height:30px;}
#menu li .sub {background:#aba;}
/* for IE5.5 and IE6 only */
#menu li a {display:block; color:#000; height:29px; line-height:29px;
font-family: verdana, Helvetica, sans-serif, arial, impact,Times New Roman;
font-size:12px; width:119px; text-decoration:none; text-align:center;}
#menu li a table {position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0;}
#menu :hover {color:#fff; background:#898; position:relative;}
#menu :hover > a {color:#fff; background:#898;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.left {visibility:hidden; width:0; height:0; overflow:hidden;}
#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:119px; left:-1px;top:26px; background:url(transparent.gif);} /* the background image is for IE7 */
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {visibility:visible; overflow:visible; height:auto; width:119px; padding:9px 3px; left:100px; top:0;}
#menu :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul.left {visibility:visible; overflow:visible; height:auto; width:119px; padding:9px 3px; left:-106px; top:0;}
e un esempio per l' html:
come posso risolvere questo problema?
grazie