Menu horizontale à 2 niveau

Bonjour,
lorsque les sous-menus en verticale, tout était OK, càd que l'onglet kayak était de bonne grandeur et la couleur orange apparaissait sur le 100% de l'onglet Acceuil...
maintenant, j'ai réussi à mettre les sous-menus sur un 2èm niveau en horizontale (display: inline) mais, les cases kayak, canoe, sont trop petite et le mouse over est actif uniquement sur le texte et non pas sur toute la cellule...

Comment faire pour que les sous-menus soient de grandeur identique à celle du menu ???
Comment faire pour que lorsqu'on passe sur une case, la couleur orance recouvre le 100% de la case ???

HELP.




mon CSS

body {
padding: 0;
background: #807715;
font: 70% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
height: 20px;
list-style-type: none;
}

#menu {
position: relative;
width:690px;
top: 20px
}

#menu dl {
float: left;
width: 10em;
margin: 0 1px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E1B21A;
border: 1px solid gray;
}

#menu dd {
float: left;
display: inline;
}

#menu li {
display: inline;
font-weight: bold;
background: #E1B21A;
margin: 0 1px;
}

#menu ul {
color:#3300FF;
}

#menu li a, #menu dt a {
color: #000;
height: 100%;
text-decoration: none;
}

#menu li a:hover, #menu dt a:hover {
border-width: 2px 1px 1px 2px;
background: #C4641F;
}

#smenu1 {
position: absolute;
left: 70px;
top: 30px;
width: 300px;
}

Salut,
en attribuant la même largeur et hauteur aux a qu'aux li qui les contiennent !

Have swing

et comment ????
quelle variable est-ce que je dois ajouter dans mon fichier CSS ???