nav { height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */ margin: 0 auto; /* Centro el contenedor */ overflow: hidden; text-align: left; width: 100%; /* Defino el ancho de mi página */ background: #0033ff; z-index: 100; position: fixed; } .menu ul { float: left; list-style-type: none; padding: 0; position: relative; left: 50%; margin-top: 5px; margin-bottom: 5px; } .menu li { float: left; /* Floto los li para que se dispongan horizontalmente */ position: relative; right: 50%; } .menu li a { padding: 15px; } .menu ul a { text-decoration: none; font-size: 14px; color: #ffffff; } .menu ul > li:before { content: "–"; position: absolute; margin-left: -1px; margin-top: 0px; color: #ffffff; font-size: 15px; } .menu ul > li.sin:before { color: transparent; } ul.menu a:hover { color: #fffff; background: red; } /*url("http://i.imgur.com/47R7Nqs.png")no-repeat*/
<nav class="menu"> <ul> <li class="sin"> <a href="http://cargocollective.com/consuelovalle/filter/editorial/">Editorial </a></li> <li><a href="http://cargocollective.com/consuelovalle/filter/personal/">Personal </a></li> <li><a href="http://cargocollective.com/consuelovalle/filter/videos/">Videos</a></li> </ul> </nav> <div id="main"> <div class="logo"> <a href="http://cargocollective.com/consuelovalle/"><img src="http://i.imgur.com/iJdtKZB.png" /> </a> </div> <div class="fijo"></div> <div class="contacto"> <a href="http://cargocollective.com/consuelovalle/contacto"> Contacto </a></div> <ul class="redes"> <li><a href="https://www.facebook.com/ovalle.consuelo">Comercial </a></li> <li><a href="http://consuelovalle.tumblr.com">Tumblr </a></li> <li class="sin"><a href="https://www.instagram.com/consuelovalle/">Instagram </a></li> </ul> </div> <div class="f_footer">All work © Consuelo Ovalle</div>