Menu déroulant vertical css (espace en trop) [Résolu/Fermé]

Signaler
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
-
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
Bonjour à tous,
Je rencontre un problème avec un code css.
J'essaie de créer un menu déroulant vertical, mais pour le moment mon menu présente un espace(comme ci dessous) quand je survole les menus <dt>

>-----------------------------------<
Menu 1 >>
...............Lien 1
...............Lien 2
...............Lien 3
Menu 2
Menu 3
>-----------------------------------<

Et donc je souhaite que ce drôle d'espace disparaisse, et que les sous menu (qui se sont déroulés) soit porté bien sur le droite du menu, pas en dessous, comme ça :

>-----------------------------------<
Menu 1 >> Lien 1
Menu 2......Lien 2
Menu 3......Lien 3
>-----------------------------------<


Je comprendrais que cela ne vous parle pas trop, est-ce qu'un screen de mon problème vous aiderait plus à comprend ?

>> état actuel en image (survol du menu 1) :
https://i82.servimg.com/u/f82/12/22/58/47/sans_t10.jpg

voici mon code css de mon menu déroulant:
<------------------------------------------------------------>
div#wrapper div#sidebar ul {
display:block;
padding: 0;
width: 147px;
margin:0px;
}

div#wrapper div#sidebar dl dd {
display:none;
}

div#wrapper div#sidebar ul li {
position:relative;
list-style: none;
}

div#wrapper div#sidebar ul ul{
position: absolute;
top: 0;
left: 100px;
}


div#wrapper div#sidebar dl:hover dd {
display:block;
}

div#wrapper div#sidebar a:hover {
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
color: #7baded;

}

<------------------------------------------------------------>

ne faites pas attention à "div#wrapper div#sidebar"... ce sont des divisions précédentes de mes pages

17 réponses

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
il faut bien placer la balise de fermeture du h1 dans le code !

et donner des valeur en css a h1

voila le code avec les titre des menus en <h1>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css" >
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    h1{ 
    font-size: 10pt; 
    float: left;
    margin: 0px; 
    }
    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <h1><a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>  </h1>         
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
       <h1> <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>  </h1>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>    
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>             
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <h1><a href="#">Menu 3</a></h1>  </li><li>        
        <h1><a href="#">Menu 4</a></h1>  </li>      
      </ul>    
    </div>  
  </body>
</html>
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
de retour de bbq :-))

le probleme vient juste de ce que tu as modifier dans la CSS du menu !
.menu {
	height: 21px;
	line-height: 21px;
	list-style-type: none;
}


met ca a la place !

.menu {
	height: 100px;
	list-style-type: none;
}



et pour le swf header met ce code a la place du tient c est beaucoup mieux pour inserer des swf !

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="935" height="450" id="flash">
            <param name="movie" value="images/header/header.swf" />
            <param name="quality" value="high" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="images/header/header.swf" width="935" height="450">
              <param name="quality" value="high" />
              <!--<![endif]--> 
              <a href="https://get.adobe.com/flashplayer/">
                <img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a> 
              <!--[if !IE]>-->
            </object> 
            <!--<![endif]-->
          </object>


A+
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
149
Date d'inscription
samedi 13 décembre 2008
Statut
Membre
Dernière intervention
20 juillet 2009
28
div#wrapper div#sidebar ul ul{
position: absolute;
top: 0;
left: 100px;
} 

Sans code Html c est tres dur d et t'aider mais apparement c est ça qui foire : left: 100px; passe le a 1px (ou supprime le) pour voir si les liens se replace bien.
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
j'ai essaiyé ce que tu me conseil à l'instant : je n'est pas de changement.


Si cela peux t'aider voici le html qui correspond au menu :

----------------------
<div id="menu">
<dl>

<dt><a href="#">Menu 1</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

<dl>

<dt><a href="#">Menu 2</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

<dl>

<dt><a href="#">Menu 3</a></dt>

<dd>
<ul>

<li><a href="#">Lien 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

</ul>

</dd>

</dl>

</div>
-------------------------------
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
J'ai trouvé une piste sur ce site :
http://www.css-faciles.com/menu-deroulant.php

passage => "Éviter les décalages verticaux"

Et pourtant le code ne marche pas : voilà le nouveau css complété encore une fois :



--------------------------
div#wrapper div#sidebar div#menu ul {
display:block;
padding: 0;
width: 147px;
margin:0px;
}

div#wrapper div#sidebar div#menu dl dd {
display:none;
}

div#wrapper div#sidebar div#menu ul li {
position:relative;
list-style: none;
display:block;
width:147px
}

div#wrapper div#sidebar div#menu ul li:hover {
display:block;
}


div#wrapper div#sidebar div#menu ul ul{
display:none;
left:147px;
position: absolute;
top: 0px;
left: 147px;
margin:0px; padding: 0px;
}


div#wrapper div#sidebar div#menu dl:hover dd {
display:block;
}
---------------------------
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
Salut

en voila un adapte le
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }

    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>            
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>              
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#">Menu 3</a></li><li>        
        <a href="#">Menu 4</a></li>      
      </ul>    
    </div>  
  </body>
</html>
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
ok merci je testerai ça rapidement dès que j'ai un créneau..
;)
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
oups. ya un nouveau problème :S

J'ai adapté le code que tu m'a donné : le menu fonctionne bien en lui même.
Le problème c'est quand je le met dans ma page.
En effet j'utilisais des <h1> pour donner un titre à mes menus avant.
Or maintenant que ce menu déroulant est en place, les titre en H1 n'apparaissent pas (enfin si, mais il sont masqué s SOUS les menus déroulants.

Donc je suis confronté à un nouveau pépin :
Voici le screen avant insertion du menu -----> https://i82.servimg.com/u/f82/12/22/58/47/sans_t13.jpg

Voici celui après insertion du menu déroulant ----> https://i82.servimg.com/u/f82/12/22/58/47/sans_t12.jpg

Comme toujours je vous donne les portions de code:
¤ HTML (Donc là c'est les menus déroulant avec les titres)
>----------------------------------------<
div id="sidebar">
<h1>titre 1</h1>
<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>

<h1>titre 2</h1>

<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>

<h1>titre 3</h1>

<div class="menu">
<ul><li>
<a href="#"><b>»</b>Menu 1
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 1a</a></li><li>
<a href="#">Sub Menu 1b</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#"><b>»</b>Menu 2
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2a</a></li><li>
<a href="#"><b>»</b>Sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b
<!--[if IE 7]>
<!--></a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul><li>
<a href="#">Sub Menu 2ba</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Sub Menu 2Bb</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li>
<a href="#">Menu 4</a></li>
</ul>
</div>
</div>
>----------------------------------------<

¤ CSS
Et ici le css de tout ce qui peux concerner le problème...

<---------------------------------------->

.menu {
height: 21px;
line-height:21px;
}
.menu ul {
margin: 0px;
padding: 0px;
position: relative;
list-style-type: none;
width: 147px;
height:21px
}
.menu li {
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
float: left;
}
.menu li.sub {
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
}
.menu table {
position: absolute;
top: 0pt;
left: 0pt;
}
.menu a, .menu a:visited {
display: block;
text-decoration: none;
height: 21px;
line-height: 21px;
width: 11em;
color: #FFFFFF;
padding-left: 1em;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.menu b {
float: right;
margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
width: 11em;
}
* html .menu a:hover {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
position: relative;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover {
position: relative;
}
.menu a:active, .menu a:focus {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover > a {
color: #FFFFFF;
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li ul {
padding: 2em;
visibility: hidden;
position: absolute;
top: -2em;
left: 7em;
background-color: transparent;
}
.menu li:hover > ul {
visibility: visible;
}
.menu ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}

....................................................................................................................

div#wrapper div#sidebar {
float: left;
width: 147px;
margin-right: 2px;
}

div#wrapper div#sidebar a {
display: block;
height: 21px;
width: 134px;
line-height: 21px;
background: transparent url(images/design/sidebar_link.gif) no-repeat left top;
color: #FFFFFF;
font-weight: bold;
padding-left: 13px;
}

div#wrapper div#sidebar a:hover {
background: transparent url(images/design/sidebar_link_over.gif) no-repeat left top;
color: #7baded;

}

div#wrapper div#sidebar h1 {
color: #f7db16;
font-size: 11px;
margin: 0px;
padding: 0px;
height: 32px;
line-height: 32px;
padding-left: 11px;
padding-bottom: 3px;
background: transparent url(images/design/sidebar_header.gif) no-repeat left;
margin-bottom: -3px;

}

<-------------------------------------->

Si vous comprenez mon problème je veux bien un petit tuyau, je me gratte la tête depuis un moment déjà.
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
Bingo ! c'était le float:left; qui me manquait sur les .h1 du css !
Avec un width:147px; le tout est parfait ^^

merci encore à vous, vous êtes géniales ;)
Mon problème est résolu.

A bientôt pour de nouvelle aventures chocolatée !
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
Désolé de vous embêter ^^'
Franchement désolé...

Mais j'ai un ultime et dernier soucis en fait :
Le premier menu de la liste ne se déroule pas, mais tout les autres si.
Pour quelles raison ?

J'ai vérifier le code, il est comme les autres (tout semble correct), et pourtant j'ai beau survoler du curseur, rien en ce passe (uniquement sur le premier de la liste)
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
??????

reverifis parce que je viens de faire un copie colle du code que j ai ^poste ! et aucun probleme !
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
et pourtant non le premier menu ne se déroule pas :S

je vais mettre la page en ligne pour voir...
Peut-être un problème de compatibilité avec le reste du code de ma page ?
je reposterai quand elle sera en ligne.
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
oui oui, tout seul ça fonctionne bien :
mais dans la page ya ce problème dont je te parle. Regarde je l'ai mis en ligne temporairement:
http://360playground.free.fr/b%C3%A9ta/index.html
Le menu est sur la gauche (le premier ne se déroule pas)

pourtant j'ai suivi tout ton code, revivifier le css... et tout et tout.

Le problème doit être ailleurs (compatibilité avec des lignes déjà écrites précédemment.

Tu peux télécharger le fichier css entier de la page ici => http://360playground.free.fr/b%C3%A9ta/style.css
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
oh que je suis bête mon dieu !
merci énormément : problème résolut ! et pour de bon ;)

Je n'aurais pas du modifier ces valeurs effectivement. Et ça semble évident une fois que ça marche...

je vous doit énormément sur ce coup là ! j'espère pouvoir vous aider un jour en retour. ^^ A bientôt !

PS : Franchement sympa le code SWF en bonus ;)
Messages postés
128
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
11 février 2011
19
Nouveau problème ^^'
Je cherche à changer le background des sous-menus. Mais en conservant celui des menus principaux.
Je ne trouve pas la ligne qui correspond aux fond des sous menus : je crains qu'ils soient tous communs.

Comment les dissocier svp ?
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
dans le CSS tu rajoute un
.sub a{
background-color: #d56419;}

tu mettra ta couleur !


Et tu donne la class="sub" au <ul> des sub ;-))
 <ul class="sub"><li>
          <a href="#">Sub Menu 1a</a></li><li>
          <a href="#">Sub Menu 1b</a></li>
        </ul>


A+