Problème avec ma liste à puce

[Lixyr]

Bonjour,

Ayant enfin retrouvé mon code, je voulais le tester, seulement il ne marche pas bien.

C'est une liste à puces imbriquée qui est démasquée par rollover.

Voici le code CSS :

Code:

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
#menu li ul {
 position:absolute;
 }

Et le code html :

Code:

<div id="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>

Tout fonctionne très bien quand j'enlève la partie

#menu li ul {
position:absolute;
}

du code css. Seulement, quand je dévoile la liste imbriquée, elle descend mon contenu. Ce code ci-dessus fait en sorte que ce qui est dévoilé passe au dessus du contenu, et ne dérange pas mon tableau, mais quand je le mets dans mon css, je n'ai plus que les items de base, plus rien ne se dévoile.

(voir sur mon forum de test pour comprendre.
(là j'ai le code est complet)

[Ea]

Bonjour,


Déjà il y a ce code bof bof au beau milieu du CSS :

Code:

li ul {display:none; }​

( il fera disparaître toute les listes ( même dans des sujets =/ ) se trouvant dans des listes )

Sans ce code ça donne quoi déjà ?

Et il faudrait mettre mais tout au début du CSS ( ou en tout cas avant ces codes là ) :

Code:

#menu ul li ul { display: none; }

Cordialement.

[Lixyr]

Et bien quand j'enlève le position absolute, ça me donne ça :

Avant le passage de la souris :


Pendant le passage de la souris :


Vous voyez que la bordure du bas du tableau descend avec la liste à puce, alors que la liste à puce devrait passer par dessus.

Ce que devrait faire le code

#menu li ul {
position:absolute;
}

mais quand je le mets plus rien n'apparait.

J'ai pris ma source la dessus.

[Ea]

Et bien le position absolute va positionner l'objet par rapport au premier élément parent positionné ( et à body par défaut si aucun élément n'est positionné ).

Sur phpbb2 à part en ayant fait des modifications jamais rien n'est positionné donc il y a une grande possibilité pour que le sous menu soit affiché tout en haut à gauche de la page.

En ajoutant ceci si c'est le problème ça pourrait apporter une solution :

Code:

#menu li { position: relative; }

( cela ne fait que positionner les éléments li, donc le premier ancêtre positionné du #menu ul li ul sera un li =P )

Cordialement.

[Lixyr]

Et bien, ça ne change pas grand chose, pour ne pas dire que ça ne change rien.

Mais ... j'ai testé le code en vidant entièrement mon css, et là ça fonctionne très bien.

Alors, effectivement, comme j'ai des onglets avec des "li ul" dans le css, je pense que le problème vient des modifications déjà effectuées sur les listes à puce.

Je vous mets là mon css :

Code:

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 position: relative;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }







/*----- BODY------*/

body {
background-image:url(http://img836.imageshack.us/img836/2273/bannierepossible.png);
    cursor: default; auto;
    background-position: top center;
    background-repeat:no-repeat;

filter:alpha(opacity=95);
-moz-opacity:0.95;
-khtml-opacity:0.95;
opacity: 0.95;
}


.forumlink {
text-decoration: none !important;
color: #FFFFFF !important;
text-shadow: 4px 4px 9px #D10101;
cursor: crosshair;
font-size: 19px;
}

.secondarytitle {
background-color: #000000;
}











/*----- IMAGES ET CARACTÈRE DE FOND ------*/



.imgopa {
opacity: 0.3 ;
}

.imgopa:hover {
opacity: 1;
}











/*----- POLICE ET CARACTÈRE ------*/


l
{
font-style: italic;
font-size: 13px;
text-shadow: 2px 2px 3px #A2A4A3;
}

b {
font-size: 13px;
text-shadow: 2px 2px 3px #A2A4A3;
}


.italicshadows {
font-style: italic;
text-shadow: 2px 2px 3px #076A73;
color: black;
font-size: 13px;
}

.shadows {
text-shadow: 2px 2px 3px #076A73;
color: black;
}





a:link {
position: relative;
text-decoration:none;
font-size: normal;
font-style: normal
}

a:hover  {
  text-decoration: none !important;
text-shadow: 3px 3px 4px #FFFFFF;
color: #FFFFFF;
font-style: oblique;
cursor: crosshair;
}






/*----- ENTÊTE ET NAVIGATION------*/


.mainmenu
{
  margin-right: 0px;
  margin-left: 0px;
}





/*----- INFOBULLES ------*/



.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 50px;
    left: 200px;
  /* style du bloc qui apparait */
  border: 1px dashed #C91010;
  border-radius: 5px;
  background-color: #BFBFBF;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
z-index: 999;
width: 170px;
height: 230px;
}
.lock:hover .lock-hidden {
  display: block;
}




  .popavatar:hover{
    background-color: transparent;
    z-index: 50;
    }
    .popavatar span img{ /*CSS image élargie*/
    border-width: 250px;
    padding: 25px;
    }
    .popavatar:hover span{ /*CSS image élargie sur hover*/
    visibility: visible;
    top: 850px;
    left: 180px;
    right: 902px;
    }
    .popavatar span{ /*CSS pour image élargie*/
    position: absolute;
    background-color: transparent;
    border: 2px outset transparent;
  -moz-border-radius: 0px 0px 30px 0px;
    visibility: hidden;
    text-decoration: none;
    padding: 15px;
    }


.InfoBulle{
  position: relative;
}
.InfoBulle .InfoBulle-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 10px;
    left: 140px;
  /* style du bloc qui apparait */
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  background-color: #303030;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
z-index: 999;
width: 100%;
}
.InfoBulle:hover .InfoBulle-hidden {
  display: block;
}












/*----- CADRES ------*/



.cadres {
  -moz-border-radius: 3px 3px 3px 3px;
  background-color: transparent;
  border : 1px solid #C40F0F;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 1px;
  padding-bottom: 1px;
  height: 100px;
  -moz-box-shadow: 3px 6px 9px #C40F0F;
}



.info {
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
padding-top: 3px;
background-color: transparent;
border: 1px ridge #666;
-moz-border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow: 2px 4px 7px #666;
font-size: 11px;
width: 70px;
}



.cadresblancs {
  -moz-border-radius: 3px 3px 3px 3px;
  background-color: transparent;
  border : 1px solid #ffffff;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 1px;
  padding-bottom: 1px;
  height: 100px;
  -moz-box-shadow: 3px 6px 9px #ffffff;
}


/*----- catégories et forums ------*/

.description {
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
padding-top: 3px;
background-color: transparent;
border: 1px ridge #666;
-moz-border-radius: 6px 6px 6px 6px;
margin-bottom: 10px;
width: 350px;
text-align: center;
}










/*----- SEPARATION ------*/

hr {
color: #C91010;
background-color: #D10101;
height: 1px;
border: 0;
}










/*----- TABLEAUX ET PUCES ------*/


table {background-repeat:no-repeat; }
th { border-collapse: collapse;
      background-color: black;
      text-align: center;
}
td
{
 border-collapse: separate;
background-repeat:no-repeat;
}




li ul {
display:none; }
li:hover ul {
display:block;
position:relative;
top:0;
left:-25px; }












/*----- QEEL ------*/


.bodyqeel {
background-color: transparent;
background-position: center top;
text-shadow: 3px 3px 4px red;
text-color: #C40F0F;
}


#blabla, #totalu, #newest, #gensmall, #logged
{ color:red;}



.groupes {
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
padding-top: 3px;
background-color: transparent;
border: 1px dotted #C91010;
-moz-border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow: 3px 5px 7px #C91010;
}
.groupes, a {text-decoration:none;}


.staff{
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
padding-top: 3px;
background-color: transparent;
border: 1px dotted #ffffff;
-moz-border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow: 3px 4px 6px #ffffff;
}
.staff, a {text-decoration:none;}



/*----- groupes ------*/

n {color: #FF0000;}
m {color: #FAA719;}
y{color: #B6C0FC;}
bu {color: #B4FC2D;}
ad {color: #AB61E8;}
pm {color: #806060}

on {text-shadow: 3px 3px 4px #FF0000;}
om {text-shadow: 3px 3px 4px #FAA719;}
oy{text-shadow: 3px 3px 4px #B6C0FC;}
obu {text-shadow: 3px 3px 4px #B4FC2D;}
oad {text-shadow: 3px 3px 4px #AB61E8;}
opm {text-shadow: 3px 3px 4px #806060;}







/*----- CATEGORIES ET SUJETS EN ONGLETS ------*/


.my_modified_table {
  border: 2px solid #ffffff;
-moz-border-radius: 6px;
  width: 100%;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 2px !important;
  font-family: Georgia Italic;
  text-align: left;
}
.my_forum_name {
  display:none;
}
.my_img{
  width: 10%;
  margin-left: 10px;
}
.my_disc{
  width: 1%;
  margin-top: -28px !important;
  text-align:center;
  font-size: 13px;
}
.my_stats{
  width: 100%;
  text-align:center;
  font-size: 12px;
}
.myfoo_title{
  text-align:left;
  width: 30%;
  margin-left: 25%;
  margin-right: 125%;
  -moz-border-radius: 1px;
  border: 0px solid #EAEAEA;
}
.my_title {
  text-align:center;
  font-size: 13px;
  font-family: Georgia Italic;
}
.my_cat_body{
  border: 1px solid #black;
  -moz-border-radius: 3px;
margin-bottom: 10px;
}
.my_cat ul{
margin-bottom: 10px;
  padding: 0;
  width: 100% !important;
}
.my_cat li{
margin-bottom: 10px;
  margin-left: 0px;
}
.my_cat_style{
  border-top: 1px #ffffff solid;
  border-left: 0px #666 solid;
  border-right: 0px #666 solid;
  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 1px;
  text-align:center;
text-decoration: underline;
  color: #FFFFFF;
background-color: #000000;
  font-size: 11px;
  padding-left: 8px;
  padding-right: 8px;
margin-bottom: 10px;
  display:inline;
  width: 100%;
  font-family: Georgia Italic;
  font-weight: bold;

}
.my_cat a{
  text-decoration: none !important;
  color: #FFFFFF;
}
.my_cat a:hover {
  text-decoration: none !important;
  color: #FFFFFF;
  text-shadow: 3px 3px 4px #666;
}










/*----- PAGE D'ACCUEIL ------*/

.textshadows
{text-shadow: 4px 4px 9px #D10101;
font-family: ; }


/*----- onglets de la page d'accueil ------*/

ul, li {
    list-style: none;
}
.mon_onglet {
    float: left;
    padding: 5px 20px;
    margin-right: 5px;
        -moz-border-radius: 3px 3px 3px 3px;
    color: #BECCCC;
    background: transparent;
        border: 0px solid transparent;
    margin-bottom: -1px;
        -moz-box-shadow: 3px 6px 9px transparent;
}
.mon_onglet:hover {
    background: transparent;
}               
.mon_onglet_selected {
    float: left;
    padding: 5px 20px;
    margin-right: 5px;
        -moz-border-radius: 3px 3px 3px 3px;
        text-shadow: 3px 3px 4px #ffffff;
    color: #ffffff;
    background: transparent;
    border-top: 0px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;   
    border-bottom: 0px solid transparent;   
        -moz-box-shadow: 3px 6px 9px transparent;
    margin-bottom: -1px;
}                   
.clear {
    clear: both;
}
.mon_contenu {
    color: #ffffff;
    background: black;
    border: 1px solid #666;
background-image:url(http://img43.imageshack.us/img43/8269/fondbulleplume.png);
    padding: 10px;       
        width: 720;
        height: 400;
}
#mes_contenus, #mes_onglets {
    width: 100%;
}





/*----- SELECTEUR COULEUR ------*/



.colorpicker {
  width: 356px;
  height: 176px;
  overflow: hidden;
  position: absolute;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
  font-family: Arial, Helvetica, sans-serif;
  display: none;
}
.colorpicker_color {
  width: 150px;
  height: 150px;
  left: 14px;
  top: 13px;
  position: absolute;
  background: #f00;
  overflow: hidden;
  cursor: crosshair;
}
.colorpicker_color div {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
  margin: -5px 0 0 -5px;
}
.colorpicker_hue {
  position: absolute;
  top: 13px;
  left: 171px;
  width: 35px;
  height: 150px;
  cursor: n-resize;
}
.colorpicker_hue div {
  position: absolute;
  width: 35px;
  height: 9px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
  margin: -4px 0 0 0;
  left: 0px;
}
.colorpicker_new_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 213px;
  top: 13px;
  background: #f00;
}
.colorpicker_current_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 283px;
  top: 13px;
  background: #f00;
}
.colorpicker input {
  background-color: transparent;
  border: 1px solid transparent;
  position: absolute;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #898989;
  top: 4px;
  right: 11px;
  text-align: right;
  margin: 0;
  padding: 0;
  height: 11px;
}
.colorpicker_hex {
  position: absolute;
  width: 72px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
  left: 212px;
  top: 142px;
}
.colorpicker_hex input {
  right: 6px;
}
.colorpicker_field {
  height: 22px;
  width: 62px;
  background-position: top;
  position: absolute;
}
.colorpicker_field span {
  position: absolute;
  width: 12px;
  height: 22px;
  overflow: hidden;
  top: 0;
  right: 0;
  cursor: n-resize;
}
.colorpicker_rgb_r {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
  top: 52px;
  left: 212px;
}
.colorpicker_rgb_g {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
  top: 82px;
  left: 212px;
}
.colorpicker_rgb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
  top: 112px;
  left: 212px;
}
.colorpicker_hsb_h {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
  top: 52px;
  left: 282px;
}
.colorpicker_hsb_s {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
  top: 82px;
  left: 282px;
}
.colorpicker_hsb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
  top: 112px;
  left: 282px;
}
.colorpicker_submit {
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
  left: 322px;
  top: 142px;
  overflow: hidden;
}
.colorpicker_focus {
  background-position: center;
}
.colorpicker_hex.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_slider {
  background-position: bottom;
}

*edit* donc peut-être que le problème serait réglé si je mettais mon code css dans un fichier externet et que j'arrivais à l'introduire sous code dans ma Page d'accueil ?


*edit encore*

Problème résolu :

J'avais ce code inutile dans mon css :

li ul {
display:none; }
li:hover ul {
display:block;
position:relative;
top:0;
left:-25px; }

Maintenant, avec

#menu li ul {
position:absolute;
}

Ça marche. Je suis tête en l'air, des fois.

Merci quand même Etana ! ^^