Estoy siguiendo el código de un tutorial básico para hacer un menú del tipo dropdown
. Y estoy tratando de aplicar por mi cuenta código CSS que me permita centrar en la pagina, el menú horizontal. Sin embargo no he podido hacerlo.
Y aca esta el CSS y el HTML que estoy aplicando...
nav {
display:block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;
background-color: #FBE080;
font: 16px Tahoma, sans-serif;
}
nav ul {
padding:0;
margin: 0;
text-align: center;
}
nav ul:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav li {
position: relative;
float: left;
list-style-type: none;
}
nav li a{
display:block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #000;
text-decoration: none;
}
nav li a:focus{
outline: none;
text-decoration: underline;
}
nav li:firt-child a{
border-left: none;
}
nav li.ultimo a {
border-right: none;
}
nav li:hover ul {
display: block;
}
nav a span {
display: block;
float: right;
margin-left: 5px;
}
nav ul a span {
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
transform: rotate(-180deg);
}
nav ul ul {
display: none;
width: 100%;
position: absolute;
left: 0;
background: #FDEDB2;
}
nav ul ul li {
float: none;
}
nav ul ul a {
padding: 5px 10px;
border-left: none;
border-right: none;
font-size: 14px;
}
nav ul ul a:hover {
background-color: #FBE080;
}
nav {
border-radius:4px;
box-shadow:2px 2px 2px rgba(0,0,0,.75);
background-image:-moz-linear-gradient(0% 22px 90deg, #FBE080, #999);
background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#FBE080));
}
nav li:hover {
background-image:-moz-linear-gradient(0% 100px 90deg, #999, #FBE080);
background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#FBE080), to(#999));
}
nav ul ul {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
box-shadow:2px 2px 2px rgba(0,0,0,.8);
background-color:rgba(253,237,178,0.8);
}
nav ul ul li {
border-left:1px solid rgba(0,0,0,0.1);
border-right:1px solid rgba(0,0,0,0.1);
}
nav ul ul li.ultimo {
border-left:1px solid rgba(0,0,0,0.1);
border-bottom:1px solid rgba(0,0,0,0.1);
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}
nav ul ul a:hover {
background-color:rgba(251,224,128,.9);
}
<!DOCTYPE html>
<html>
<head>
<title>Menú de Navegación</title>
<link rel="stylesheet" href="estilo2.css">
</head>
<body>
<nav id="MenuNav">
<ul>
<li> <a href="#" title="Menu 1">Menú 1</a> </li>
<li> <a href="#" title="Menu 2">Menú 2<span>^</span></a>
<ul>
<li> <a href="#" title="SubMenu 1">Submenú 1</a> </li>
<li> <a href="#" title="SubMenu 2">Submenú 2</a> </li>
<li class="ultimo"> <a href="#" title="SubMenu 3">Submenú 3</a> </li>
</ul>
</li>
<li> <a href="#" title="Menu 3">Menú 3</a> </li>
<li> <a href="#" title="Menu 4">Menú 4<span>^</span></a>
<ul>
<li> <a href="#" title="SubMenu 4">Submenú 4</a> </li>
<li class="ultimo"> <a href="#" title="SubMenu 5">Submenú 5</a> </li>
</ul>
</li>
<li> <a href="#" title="Menu 5">Menú 5</a> </li>
</ul>
</nav>
</body>
</html>