¿Cómo puiedo hacer para solucionar esto? La web es www.sureact.com
El código css que se aplica en este punto es el siguiente:
Código:
No veo donde tengo que modificar los valores para que se me ajuste a 6 elementos..sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
#main-menu{ width:940px; position:relative; margin:0 auto; padding-bottom:37px; z-index:99;}
.nav-left{ background:url(../images/nav-left.png) 0 0 no-repeat; width:6px; height:25px; margin-left:-6px;}
.nav-right{ background:url(../images/nav-right.png) 0 0 no-repeat; width:5px; height:25px; margin-right:-5px;}
.sf-menu{border-top:6px solid #1d1d1d; box-shadow:0 1px 2px rgba(0,0,0,.2); border-radius:0 0 5px 5px;}
.sf-menu li {position:relative; float:left; font-size:14px; line-height:18px; background:url(../images/menu-line.jpg) 0 0 no-repeat; padding-left:1px;}
.sf-menu li:first-child{ background:none; padding-left:0;}
.sf-menu li a {display:block;position:relative; color:#2e2e2e;background:url(../images/menu.png) 0 -50px repeat-x #e8e8e8; padding:15px 65px 17px;}
.sf-menu li:first-child a,.sf-menu li:first-child a strong{ border-radius:5px 0 0 5px;}
.sf-menu li.last a,.sf-menu li.last a strong{ border-radius:0 5px 5px 0;}
.sf-menu li a strong{ display:block; width:100%; height:100%; top:0; left:0; position:absolute; opacity:0;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease; z-index:1;
background: #21d7ff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#21d7ff), to(#0FA1FF));
background: -webkit-linear-gradient(#21d7ff, #0FA1FF);
background: -moz-linear-gradient(#21d7ff, #0FA1FF);
background: -ms-linear-gradient(#21d7ff, #0FA1FF);
background: -o-linear-gradient(#21d7ff, #0FA1FF);
background: linear-gradient(#21d7ff, #0FA1FF);}
.sf-menu li a span{ position:relative; z-index:2;}
.sf-menu li.sfHover a,.sf-menu li.current a{color:#fff;
background: #21d7ff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#21d7ff), to(#0FA1FF));
background: -webkit-linear-gradient(#21d7ff, #0FA1FF);
background: -moz-linear-gradient(#21d7ff, #0FA1FF);
background: -ms-linear-gradient(#21d7ff, #0FA1FF);
background: -o-linear-gradient(#21d7ff, #0FA1FF);
background: linear-gradient(#21d7ff, #0FA1FF);}
.sf-menu li a:hover strong{ opacity:1;}
.sf-menu li a:hover{color:#fff;}
.sf-menu ul {
position: absolute;
top: -999em;
z-index: 99;
width: 188px;
display:none;
background:none;
}
.sf-menu li li{width:100%;padding:0;}
.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{color:#fff; background:url(../images/submenu.png) 0 0 repeat-x !important; border-radius:0; padding:15px 0 17px; text-align:center}
.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{background:url(../images/submenu.png) 0 -50px repeat-x !important;}
.sf-menu ul ul {
position: absolute;
top: -999em;
z-index: 99;
width: 188px;
display:none;
background:none;
}
.sf-menu li li li{}
.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{background:url(../images/submenu.png) 0 0 repeat-x !important;}
.sf-menu li li li a:hover,.sf-menu li li li.current a{background:url(../images/submenu.png) 0 -50px repeat-x !important;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
top: 50px; /* match top ul list item height */
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 188px; /* match ul width */
top: 0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 00px;
}
.sf-menu li a span.arrow{ display:block; background:url(../images/arrow.png) 0 0 no-repeat; width:10px; height:7px; position:absolute; top:43%; left:68%;}
.sf-menu li a:hover span.arrow,.sf-menu li.current a span.arrow,.sf-menu li.sfHover a span.arrow{background:url(../images/arrow-white.png) 0 0 no-repeat;}
.sf-menu li li a span.arrow{ background:url(../images/arrow-white.png) 0 0 no-repeat;}
@media only screen and (min-width: 768px) and (max-width: 979px) {
#main-menu{ width:748px;}
.sf-menu li a{ display:block;padding:15px 46px 17px;}
.sf-menu li a span.arrow{left:75%;}
.sf-menu li li a span.arrow{left:65%;}
}
@media only screen and (max-width: 767px) {
#main-menu,.sf-menu{ width:300px; box-shadow:none;}
.sf-menu li{ padding:0;float: none; background:none; margin-bottom:5px;}
.sf-menu li a{ display:block; width:280px;border-radius:5px !important; padding:15px 0 17px 20px; box-shadow:0 0 2px rgba(0,0,0,.2);}
.sf-menu li a strong{border-radius:5px;}
.sf-menu li li{ margin:0;}
.sf-menu li li a{ text-align:left !important;width:270px;padding:15px 0 17px 30px !important;}
.sf-menu li li li a{width:260px;padding:15px 0 17px 40px !important;}
.sf-menu ul,.sf-menu ul ul{ min-width:100%; padding:0;position: relative; left: 0 !important; top:0px !important;}
.sf-menu li a span.arrow,.sf-menu li li a span.arrow{left:90px; padding:0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#main-menu,.sf-menu{ width:420px;}
.sf-menu li a{ width:400px;}
.sf-menu li li a{ width:390px;}
.sf-menu li li li a{ width:380px;}
}
Muchas gracias
