Hola de nuevo, he echo lo que ha dicho Eseceve y he jugado con los valores y me ha dado, creo, un buen resultado, así ha quedado el codigo:
Código html:
Ver original <h1>Bienvenido a Betaconsolas.com
</h1> <li><a class="sub" href="dropdown.html"><b>Dropdown
</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#url">Dropdown One
</a></li> <li><a href="#url">Dropdown Two
</a></li> <li><a href="#url">Dropdown Three
</a></li> <li><a href="#url">Dropdown Four
</a></li> <li><a class="last" href="#url">Dropdown Five
</a></li> <li><a class="sub" href="#"><b>URL
</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#url">URL One
</a></li> <li><a href="#url">URL Two
</a></li> <li><a href="#url">URL Three
</a></li> <li><a href="#url">URL Four
</a></li> <li><a class="last" href="#url">URL Five
</a></li>
Así ha quedado el CSS:
Código css:
Ver original/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssmenus.co.uk[/url]
Copyright (c) 2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
#dropline {
font-family : arial, sans-serif;
font-size : 12px;
height : 41px;
left : 0px;
list-style-image : none;
list-style-type : none;
margin-bottom : 0;
margin-left : auto;
margin-right : auto;
margin-top : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
position : relative;
text-align : center;
top : 0px;
width : 1000px;
}
#dropline div {
padding:0;
margin:0 auto;
list-style:none;
position:absolute;
left:-9999px;
width:1000px;
text-align:center;
background:url(trans.gif);
}
#dropline table {
border-collapse:collapse;
font-size:1em;
float:left;
margin:0px;
}
#dropline ul li {
display:inline;
margin:0;
text-align:left;
}
#dropline ul li a {
display:inline-block;
height:30px;
line-height:30px;
margin:0;
padding:0px;
background:transparent;
font-weight:bold;
font-size:11px;
}
#dropline li {
display:inline;
margin:0 -2px;
text-align:left;
}
#dropline li a {
display:inline-block;
height:36px;
margin:5px 0 0 0;
padding:0px 0 0;
line-height:30px;
text-decoration:none;
color:#000;
}
#dropline li a.sub {
background:url(button-arrow.gif) right top;
}
html>/**/body #dropline li {
display:inline-block;
padding:0;
}
* html #dropline li a {
margin-bottom:-4px;
margin-right:0px;
}
#dropline li a b {
display:block;
height:36px;
float:left;
padding:0 0 0 25px;
cursor:pointer;
}
#dropline li a:hover {
background-position:right bottom;
color:#fff;
}
#dropline li a:hover b {
background-position:left bottom;
}
#dropline li:hover > a {
background-position:right bottom;
color:#fff;
}
#dropline li:hover > a b {
background-position:left bottom;
}
#dropline :hover div {
left:0;
top:41px;
}
#dropline :hover ul li a:hover {
text-decoration:underline;
color:#800;
}
Y así quedo en una imagen:
¿Qué os parece?
Ahora lo que intento es que se alineen a la derecha, que pienso que con un poco de investigación en el codigo, me las puedo arreglar.
Saludos