28172 sujets

CSS et mise en forme, CSS3

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 Smiley bawling

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