3

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&uacute; de Navegaci&oacute;n</title>
		<link rel="stylesheet" href="estilo2.css">
	</head>
	<body>
		<nav id="MenuNav">
			<ul>
				<li> <a href="#" title="Menu 1">Men&uacute; 1</a> </li>
				<li> <a href="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
						<li> <a href="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 3">Men&uacute; 3</a> </li>
				<li> <a href="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 5">Men&uacute; 5</a> </li>	
			</ul>
		</nav>
	</body>
</html>

2 respuestas 2

2

Puedes centrar el menú aplicando los siguientes pasos:

  • Haz que el nav centre su contenido añadiendo text-align:center.
  • Haz que la lista tenga display:inline-block, de este modo no ocupará todo el ancho del padre y se centrará dentro del nav.
  • Ahora el problema es que queda un espacio "en blanco" bajo la lista, para solucionarlo puedes especificar un alto para el nav (p.e.: la lista tiene un alto de 39px).

De este modo el nav seguirá ocupando el 100% de la pantalla y sólo la lista se centrará dentro. Aquí puedes ver los cambios funcionando:

nav {
	display:block;
	margin: 0 auto 20px;
	border: 1px solid #222;
	position: relative;
	background-color: #FBE080;
	font: 16px Tahoma, sans-serif;
    text-align:center;
    height:39px;
}

nav ul {
	padding:0;
	margin: 0;
    display:inline-block;
    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&uacute; de Navegaci&oacute;n</title>
		<link rel="stylesheet" href="estilo2.css">
	</head>
	<body>
		<nav id="MenuNav">
			<ul>
				<li> <a href="#" title="Menu 1">Men&uacute; 1</a> </li>
				<li> <a href="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
						<li> <a href="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 3">Men&uacute; 3</a> </li>
				<li> <a href="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 5">Men&uacute; 5</a> </li>	
			</ul>
		</nav>
	</body>
</html>

1
  • Excelente. Muchas gracias :D Commented el 27 feb. 2016 a las 1:36
2

.Wrapper {
    text-align: center;
}

nav {
	display:inline-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&uacute; de Navegaci&oacute;n</title>
		<link rel="stylesheet" href="estilo2.css">
	</head>
	<body>
        <div class="Wrapper">
		<nav id="MenuNav">
			<ul>
				<li> <a href="#" title="Menu 1">Men&uacute; 1</a> </li>
				<li> <a href="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
						<li> <a href="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 3">Men&uacute; 3</a> </li>
				<li> <a href="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
					<ul>
						<li> <a href="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
						<li class="ultimo"> <a href="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
					</ul>
				</li>	
				<li> <a href="#" title="Menu 5">Men&uacute; 5</a> </li>	
			</ul>
		</nav>
        </div>
	</body>
</html>

1
  • Unicamente agreaste text-align: center; a la class wrapper que agregaste y al ul dentro de nav, no? Por cierto... con tu edición la barra del menú no abarca la pagina completa, como esta originalmente. Commented el 26 feb. 2016 a las 21:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.