Ajuste Menu horizontal

[guillegm]

Buenas, estoy maquetando una web en css y me encuentro con lo siguiente.

Quiero que en el menú de navegación el ítem seleccionado (blanco) se vea más grande que el resto, de esta manera.


Aquí esta mi código css del menú:

Código:

/*menu*/
#menu ul {
margin: 0 auto;
padding: 10px 0 0 0;
background-color: #564a18;
display:block;
height:50px;
font-family: georgia, serif;
font-size: 9pt;
color: white;
font-weight:bold;
text-align: center;
list-style-type: none;
}
#menu ul li {
	float: left;
	margin-left: 4px;
}
#menu ul li a {
	padding: 14px 0 0 0;/*0.5em;*/
	display: block;
	width: 100px;
	height: 30px;
	text-decoration: none;
	color: white;
	border-width: 1px;
    border-color: #fff;
    border-style: solid;
	background: #857d2b;
}
#menu ul li a:hover {
margin:5px 0 0 0 0;
	color:black;
	border-color: #fff;
    border-style: solid;
	background:white;
}
#menu ul li a.selected {
	padding: 6px;/*0.5em;*/
	display: block;
	width: 100px;
	height: 40px;
	color:#000000;
	background: white;
	margin-left:-4px;
}

También me gustaría saber como puedo hacer para que quede una franja de 50px de alto en todo la anchura de la web, pero que el menu no comience en el principio.
Muchas gracias.

[hades87]

para hacer el botón mas grande simplemente dale mas height al div :D, lo estas haciendo con ul y li?

[guillegm]

le doy el valor del height con ul y li. Si le doy un heigt mayor, lo que me hace es que se ve más grande, y yo lo que quiero es que los ul li a se hicieran más bajos (como en las imágenes que muestro) que los ul li a.selected.
Ejemplo:
Así está:

Así lo querría


Muchas gracias.

[hades87]

simplemente le metes un padding-top de los pixeles que quieres.