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.