J'essaye de trouver comment remplacer une valeur qui me décale tout vers la droite
Il s'agit :
<div id="paragraph-content" class="mm-item-content" style="display: none; top: 41px; left: 468px; height: auto;">
et notamment : left: 468px;
toutefois comme c'est un menu avec dropdown qui est affiché, elle est "invisible".
le script que j'utilise : http://www.geektantra.com/projects/jquery-megamenu-2/ et adapté un peu à mon cas au niveau css.
Le pb est que sur la démo cela fonctionne bien mais pas chez moi
code html généré
mon css :
Avez vous une idée ?
merci
Il s'agit :
<div id="paragraph-content" class="mm-item-content" style="display: none; top: 41px; left: 468px; height: auto;">
et notamment : left: 468px;
toutefois comme c'est un menu avec dropdown qui est affiché, elle est "invisible".
le script que j'utilise : http://www.geektantra.com/projects/jquery-megamenu-2/ et adapté un peu à mon cas au niveau css.
Le pb est que sur la démo cela fonctionne bien mais pas chez moi
code html généré
<ul class="megamenu " style="display: block;">
<li class="mm-item" style="float: left;">
<a class="mm-item-link" href="http://boutique/index.php/parrures-c-114">Bien-être</a>
<ul>
<li>
<div id="paragraph-content" class="mm-item-content" style="display: none; top: 41px; left: 468px; height: auto;">
<div class="mm-content-base">
<div class="mm-js-shadow" style="height: 48px; width: 860px; top: 3px; left: 3px; opacity: 0.5;"></div>
</div>
</li>
</ul>
</li>
<li class="mm-item" style="float: left;">
<li class="mm-item" style="float: left;">
<li class="mm-item" style="float: left;">
<li class="mm-item" style="float: left;">
<li class="clear-fix"></li>
</ul>
mon css :
/*
jQuery MegaMenu Plugin
Author: GeekTantra
Author URI: http://www.geektantra.com
http://www.geektantra.com/2010/05/jquery-megamenu-2/
*/
ul.megamenu {
background-color: #dadada;
border-top: 1px solid #dadada;
border-bottom: 1px solid #dadada;
margin: 0px auto;
padding: 0px 0px 0px 0px;
list-style: none;
display: none;
}
ul.megamenu li.mm-item {
}
ul.megamenu li {
margin: 0px;
padding: 0px;
}
ul.megamenu li.clear-fix {
float: left;
clear: both;
margin: 0px;
padding: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
}
ul.megamenu a.mm-item-link:link, ul.megamenu a.mm-item-link:visited {
position: relative;
display: inline-block;
color: #ffffff;
background-color:#7e736f;
padding: 8px 15px 8px 15px;;
margin: 0px 0px 0px 0px;
text-decoration: none;
z-index: 10;
font-size: 14px;
/*
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
*/
}
ul.megamenu a.mm-item-link:link, ul.megamenu a.mm-item-link:visited {
/*
border-color: pink;
filter: chroma(color=pink);
*/
}
ul.megamenu a.mm-item-link-hover:link, ul.megamenu a.mm-item-link-hover:visited {
color: #444;
background: #d3cdcb;
/*
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
-moz-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
*/
}
ul.megamenu div.mm-item-content {
background: #dadada;
padding: -10px;
position: absolute;
border: 5px solid #777;
z-index: 9;
width:860px;
float:left;
}
.mm-content-base {
background: #FFF;
position: relative;
z-index: 11;
padding: 10px;
width:860px;
float:left;
}
.mm-js-shadow {
background: #dadada;
position: absolute;
z-index: 10;
}
Avez vous une idée ?
merci