Menu déroulant vertical css (espace en trop)

Résolu
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
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
A voir également:

17 réponses

Réponse 1 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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
Réponse 2 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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
Réponse 3 / 17
chupa23 Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   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.
0
Réponse 4 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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>
-------------------------------
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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;
}
---------------------------
0
Réponse 6 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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>
0
Réponse 7 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
ok merci je testerai ça rapidement dès que j'ai un créneau..
;)
0
Réponse 8 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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à.
0
Réponse 9 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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 !
0
Réponse 10 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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)
0
Réponse 11 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
??????

reverifis parce que je viens de faire un copie colle du code que j ai ^poste ! et aucun probleme !
0
Réponse 12 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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.
0
Réponse 13 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
REGARDE C EST LE COPIE COLLE
0
Réponse 14 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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
0
Réponse 15 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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 ;)
0
Réponse 16 / 17
captainfalcon92 Messages postés 128 Date d'inscription   Statut Membre Dernière intervention   22
 
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 ?
0
Réponse 17 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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+
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
menu caché
laurent -
ChariduP -

7 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses