Tengo un problema al tratar de averiguar cómo centrar el hmenu de manera adecuada. He buscado, pero el CSS es bastante avanzado. Quiero que la barra de menú esté en pantalla completa como está ahora, pero las opciones del menú deben estar centradas (sin importar la resolución de la pantalla).

Www.sleepstudymo.com

Aquí está el código (lo siento, es largo, pero no sabía qué parte copiar):

.sleep-nav
{
   background: #00628F;
   background: -webkit-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -moz-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -o-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -ms-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   -svg-background: linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: linear-gradient(to bottom, #003B57 0, #0088C7 100%) no-repeat;
   -webkit-border-radius:5px 5px 0 0;
   -moz-border-radius:5px 5px 0 0;
   border-radius:5px 5px 0 0;
   border-bottom:1px solid #6BD0FF;
   padding:12px 2px 0;
   margin:20px auto 0;
   position: relative;
   z-index: 499;
   text-align: left;
}

ul.sleep-hmenu a, ul.sleep-hmenu a:link, ul.sleep-hmenu a:visited, ul.sleep-hmenu a:hover 
{
   outline: none;
   position: relative;
   z-index: 11;
}

ul.sleep-hmenu, ul.sleep-hmenu ul
{
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}

ul.sleep-hmenu li
{
   position: relative;
   z-index: 5;
   display: block;
   float: left;
   background: none;
   margin: 0;
   padding: 0;
   border: 0;
}

ul.sleep-hmenu li:hover
{
   z-index: 10000;
   white-space: normal;
}

ul.sleep-hmenu:after, ul.sleep-hmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}

ul.sleep-hmenu, ul.sleep-hmenu ul 
{
   min-height: 0;
}

ul.sleep-hmenu 
{
   display: inline-block;
   vertical-align: bottom;
   padding-left: 5px;
   padding-right: 5px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}


.sleep-nav:before 
{
   content:' ';
}

.desktop .sleep-nav{
   width: 100%;
   padding-left: 2px;
   padding-right: 2px;

}

.sleep-hmenu-extra1
{
   position: relative;
   display: block;
   float: left;
   width: auto;
   height: auto;
   background-position: center;
}

.sleep-hmenu-extra2
{
   position: relative;
   display: block;
   float: right;
   width: auto;
   height: auto;
   background-position: center;
}

.sleep-hmenu
{
   float: left;
}

.sleep-menuitemcontainer
{
   margin:0 auto;
}
ul.sleep-hmenu>li {
   margin-left: 9px;
}
ul.sleep-hmenu>li:first-child {
   margin-left: 4px;
}
ul.sleep-hmenu>li:last-child, ul.sleep-hmenu>li.last-child {
   margin-right: 4px;
}

ul.sleep-hmenu>li>a
{
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid transparent;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 31px;
   cursor: pointer;
   text-decoration: none;
   color: #FFFFFF;
   line-height: 31px;
   text-align: center;
}

.sleep-hmenu>li>a, 
.sleep-hmenu>li>a:link, 
.sleep-hmenu>li>a:visited, 
.sleep-hmenu>li>a.active, 
.sleep-hmenu>li>a:hover
{
   font-size: 18px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-align: left;
   text-shadow: 1.4px 1.4px 0 rgba(23, 23, 23, 0.82);
}

ul.sleep-hmenu>li>a.active
{
   background: #6BD0FF;
   background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid #6BD0FF;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
   color: #FFFFFF;
   padding-bottom: 1px;
   margin-bottom: -1px;
   text-decoration: none;
}

ul.sleep-hmenu>li>a:visited, 
ul.sleep-hmenu>li>a:hover, 
ul.sleep-hmenu>li:hover>a {
   text-decoration: none;
}

ul.sleep-hmenu>li>a:hover, .desktop ul.sleep-hmenu>li:hover>a
{
   background: #6BD0FF;
   background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid #A6A6A6;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
}
ul.sleep-hmenu>li>a:hover, 
.desktop ul.sleep-hmenu>li:hover>a {
   color: #FFFFFF;
   text-decoration: none;
}
ul.sleep-hmenu>li>a.active:hover {
   padding-bottom: 0;
   margin-bottom: 0;
}

ul.sleep-hmenu>li:before
{
   position:absolute;
   display: block;
   content:' ';
   top:0;
   left:  -9px;
   width:9px;
   height: 31px;
   background: url('images/menuseparator.png') center center no-repeat;
}
ul.sleep-hmenu>li:first-child:before{
   display:none;
}

ul.sleep-hmenu li li a
{
   background: #80D7FF;
   background: transparent;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   padding:0 8px;
   margin:0 auto;
}
ul.sleep-hmenu li li 
{
   float: none;
   width: auto;
   margin-top: 0;
   margin-bottom: 0;
}

.desktop ul.sleep-hmenu li li ul>li:first-child 
{
   margin-top: 0;
}

ul.sleep-hmenu li li ul>li:last-child 
{
   margin-bottom: 0;
}

.sleep-hmenu ul a
{
   display: block;
   white-space: nowrap;
   height: 29px;
   min-width: 7em;
   border: 0 solid transparent;
   text-align: left;
   line-height: 29px;
   color: #00ABFA;
   font-size: 16px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

.sleep-hmenu ul a:link, 
.sleep-hmenu ul a:visited, 
.sleep-hmenu ul a.active, 
.sleep-hmenu ul a:hover
{
   text-align: left;
   line-height: 29px;
   color: #00ABFA;
   font-size: 16px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

ul.sleep-hmenu ul li a:hover, .desktop ul.sleep-hmenu ul li:hover>a
{
   background: #FFFFFF;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   margin:0 auto;
}
.sleep-hmenu ul a:hover
{
   text-decoration: none;
   color: #7A7A7A;
}

.desktop .sleep-hmenu ul li:hover>a
{
   color: #7A7A7A;
}

ul.sleep-hmenu ul:before
{
   background: #E5F7FF;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   border:1px solid #B3E7FF;
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   z-index: 1;
}
.desktop ul.sleep-hmenu li:hover>ul {
   visibility: visible;
   top: 100%;
}
.desktop ul.sleep-hmenu li li:hover>ul {
   top: 0;
   left: 100%;
}

ul.sleep-hmenu ul
{
   visibility: hidden;
   position: absolute;
   z-index: 10;
   left: 0;
   top: 0;
   background-image: url('images/spacer.gif');
}

.desktop ul.sleep-hmenu>li>ul
{
   padding: 12px 32px 32px 32px;
   margin: -10px 0 0 -30px;
}

.desktop ul.sleep-hmenu ul ul
{
   padding: 32px 32px 32px 14px;
   margin: -32px 0 0 -9px;
}

.desktop ul.sleep-hmenu ul.sleep-hmenu-left-to-right 
{
   right: auto;
   left: 0;
   margin: -10px 0 0 -30px;
}

.desktop ul.sleep-hmenu ul.sleep-hmenu-right-to-left 
{
   left: auto;
   right: 0;
   margin: -10px -30px 0 0;
}

.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-left-to-right {
   right: auto;
   left: 100%;
}
.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-right-to-left {
   left: auto;
   right: 100%;
}

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 32px 32px 32px 14px;
   margin: -32px 0 0 -9px;
}

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 32px 14px 32px 32px;
   margin: -32px -9px 0 0;
}

.desktop ul.sleep-hmenu li ul>li:first-child {
   margin-top: 0;
}
.desktop ul.sleep-hmenu li ul>li:last-child {
   margin-bottom: 0;
}

.desktop ul.sleep-hmenu ul ul:before
{
   border-radius: 13px;
   top: 30px;
   bottom: 30px;
   right: 30px;
   left: 12px;
}

.desktop ul.sleep-hmenu>li>ul:before
{
   top: 10px;
   right: 30px;
   bottom: 30px;
   left: 30px;
}

.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-left-to-right:before {
   right: 30px;
   left: 30px;
}
.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-right-to-left:before {
   right: 30px;
   left: 30px;
}
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right:before {
   right: 30px;
   left: 12px;
}
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left:before {
   right: 12px;
   left: 30px;
}
-2
Don Sides 15 dic. 2016 a las 19:20

2 respuestas

La mejor respuesta

Para .sleep-nav establecer text-align: center: su menú es un elemento de bloque en línea, por lo que estará centrado como el texto y, en segundo lugar, debe eliminar float: left para ul.sleep-hmenu o establecerlo en none.

0
Joint 15 dic. 2016 a las 16:30

Esto es lo que hice para que funcione:

ul.sleep-hmenu {
width: 100%;
display: block;
text-align: center;
}

ul.sleep-hmenu li {
/*-Remove Float: left;-*/
}

Hazme saber si tienes alguna pregunta.

0
oompahlumpa 15 dic. 2016 a las 16:42