Me podrian ayudar centrando este menu?? he movido gran parte del codigo pero no queda justo en el centro como deberia de quedar, queda encimado o a los lados.... gracias!
Código :
<style type="text/css">
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
font-family:Verdana, Arial, Helvetica, sans-serif;
z-index: 100;
position: relative;
background-image: url(147949_mundoimg_david1878_car-game-40.jpg);
}
.nav li {
border-right: 1px solid #ccc;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #000000;
display: block;
padding: 0 9px;
text-transform: lowercase;
text-decoration: none;
}
.nav li a:hover {
background: #fff;
color: #fff;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #fff;
color: #000;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #fff;
color: #000;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: transparent;
color: #ccc;
}
.nav ul {
background: #ffffff;
border-bottom: 1px solid #fff;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top:auto;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.nav ul a:hover {
background: #fff;
color: #000;
}
body {
background-image: url(Fallen.jpg);
}
</style>
</head>
<body>
<ul class="nav" id="nav-one" name="nav-one">
<li> <a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li> <a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li> <a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li> <a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
<script type="text/javascript">
</script>
</li>
</ul>
</body>
</html>
