Problemas centrando un menu desplegable horizontal CSS Me he bajado un menú prediseñado y le he cambiado las opciones para que quede como yo quiero. Entonces, hay un fichero aparte llamado style.css, en el que se define el estilo, hasta ahí todo bien.
El problema es que, no consigo de ninguna manera centrar el menú de botones y mucho menos eliminar los bordes de éste con la cabecera, he intentado muchas cosas y nada (cabe decir que soy un novato total con el CSS, pero no con html). Si alguien me pudiera ayudar le estaria eternamente agradecido... Os dejo la documentación, por si teneis curiosidad.
Éste es el aspecto que presenta la web (totalmente en construccion, claro)
Éste es el index.htm:
Código:
y éste es el fichero aparte style.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>Franet</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p align="center"><img src="capsalera.gif" border="0"></p>
<ul class="menu" id="menu">
<li><a href="#" class="menulink">Inici</a>
</li>
<li><a href="#" class="menulink">Informació Corporativa</a></li>
<li>
<a href="#" class="menulink">Serveis</a>
<ul>
<li><a href="#">Neteja i Manteniment</a></li>
<li><a href="#">Tractament de paviments</a></li>
<li><a href="#">Neteges Tècniques</a></li>
<li><a href="#">Altres Serveis</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Treballa amb Nosaltres</a></li>
<li><a href="#" class="menulink">Contacte</a></li>
</ul>
</p>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
Código:
Muchisimas gracias de antemano! body {font:11px Verdana,Arial; background:#FFFFFF; margin: 0; padding: 0; }
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#FFFFFF; text-decoration:none;}
ul.menu li {position:relative; float:left; margin-right:1px;}
ul.menu ul {position:absolute; top:26px; left:0; background:#008A00; display:none; opacity:0; list-style:none;}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:160px; margin:0;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#008A00;}
ul.menu ul li a:hover {background:url(images/header_over.gif);}
ul.menu ul ul {left:148px; top:-1px;}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif)}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {}
ul.menu .topline {border-top:1px solid #aaa}
