Hola, estoy realizando un menu horizontal desplegable pero no consigo poner el menu centrado como en la cabecera. y los submenus me salen pero al desplegarlo sale una distancia muy grande entre palabra y palabra.
Adjunto html y css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PRACTICA 4</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script language="javascript" src="urchin.js"type="text/javascript"></script>
<script language="javascript" src="urchin2.js"type="text/javascript"></script>
<div class="cabecera"></div>
<ul class="menu">
<li>INICIO</li>
<li>PRACTICA 1
<ul>
<li>EJERCICIO 1</li>
<li>EJERCICIO 2</li>
<li>EJERCICIO 3</li>
<li>EJERCICIO 4</li>
<li>EJERCICIO 5</li>
</ul>
</li>
<li>PRACTICA 2
<ul>
<li>EJERCICIO 1</li>
<li>EJERCICIO 2</li>
<li>EJERCICIO 3</li>
</ul>
</li>
<li>PRACTICA 3
<ul>
<li>FORMULARIO</li>
</ul>
</li>
<li>JUEGO</li>
</ul>
</body>
</html>
y el css:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0000FF;
text-decoration: none;
background-color: #FCDEA0;
}
.cabecera {
height: 140px;
width: 750px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
background-image: url(cabecera_p4.jpg);
}
ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative;
width:140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000099;
background-color: #FF9900;
height: 100px;
}
ul.menu ul
{
position:absolute;
left:30px;
top:-1px;
display:none;
list-style:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000099;
background-color: #FF9900;
height: 100px;
width: 140px;
}
ul.menu li:hover > ul
{
display:block;
}
ul.menu> li > ul
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li
{
display:inline;
}
ALGUIEN PUEDE AYUDARME?
GRACIAS.