malaved Posted December 17, 2013 Share Posted December 17, 2013 Estoy usando Prestashop 1.5.6.1 con una plantilla que descargué llamada "Freestyle". Personalicé los colores del menú horizontal, pero cuando paso el puntero sobre cada opción principal del menú, se despliega la lista de las subcategorias de forma descuadrada tal como se ve en la imagen adjunta. Me gustaría que la lista que se despliega de cada una de mis subcategorias apareciera donde está la sombra negra que coloqué... Este es el código css de mi plantilla en la sección "Block top Menu": ************************************************************************************************ Block top Menu ************************************************************************************************ */ .sf-contener{ clear:none; position:relative; display:block; margin-top: 75px; ; height:70px; width:800px; z-index:11; } .sf-contener .sf-menu{ margin:18px 0 0 0; padding:0; width:auto; background:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .sf-contener .sf-menu ul{ position:absolute; background:#ff6600; border-top:5px solid #ff6600; border-bottom:1px solid #ff6600; border-left:1px solid #ff6600; border-right:1px solid #ff6600; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; padding:10px; width:5em; } .sf-shadow ul{ background:none; padding:0; } .sf-contener .sf-menu li{ background:none; border:none; } .sf-contener .sf-menu li:last-of-type{ border-right:none; } .sf-contener .sf-menu > li > a{ text-transform:uppercase; font-size:14px; color:#ffffff font-weight:bold; padding:10px 15px; } .sf-contener .sf-menu > li > a:active { color:#ffffff; text-decoration:none; } .sf-contener .sf-menu a{ display:block; position:relative; color:#ffffff; font-size:14px; line-height:13px; padding:0; margin:0; } .sf-contener .sf-menu a, .sf-menu a:visited{ color:#ffffff; } .sf-sub-indicator{ display:none!important; } .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: none; color:#ffffff; text-decoration:none; } .sfHoverForce > a{ color:#ffffff!important; text-decoration:none; } .sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active { background:none; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:10px; top:34px; /* match top ul list item height */ z-index:-10; width:auto; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top:-10px; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: 0px; left:40px } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:0px; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left:150px; top:0; } .sf-contener .sf-menu li li { border-right:none; padding:12px 0 0 0; width:auto; min-width:150px; } .sf-contener .sf-menu li li:first-child { border-right:none; padding:0; } .sf-contener .sf-menu li li li { border-right:none; padding:12px 0 0 0; } .sf-contener .sf-menu li li li:first-child { border-right:none; padding:0; } .sf-right { margin-right: 14px; float: right; width: 7px; } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; border-right: 1px solid #777; } Link to comment Share on other sites More sharing options...
valenciatablet Posted December 21, 2013 Share Posted December 21, 2013 (edited) Hola malaved, ése descuadre te ocurre porque no hay margin suficiente en el topmenú entre artículo y artículo. Intenta cambiar los valores del margin, y posiblemente encajen bien. Fijate también que están en mayúsculas. No sé si tendrá que ver. Edited December 21, 2013 by valenciatablet (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts