sous menu

Toute question relative aux feuilles de style CSS

sous menu

Messagepar rokaya10 » Jeu 01 Mars 2012 09:13

Bonjour, voici le code que j'ai écris mais ça ne marche pas les sous menus ne s'affichent pas:
Code: Tout sélectionner
<ul id="menuDeroulant">
 <li>
  <a href="#">Partie 1</a>
  <ul class="sousMenu">
   <li><a href="#">partie11</a></li>
   <li><a href="#">partie12</a></li>
     </ul>
 </li>
 <li>
  <a href="#">Partie 2</a>
  <ul class="sousMenu">
   <li><a href="#">partie21</a></li>
   <li><a href="#">partie22</a></li>
   </ul>
 </li>


le code css:
Code: Tout sélectionner
body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}   
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}   
#menuDeroulant .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}      
#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}   
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}   
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}         
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}         
#menuDeroulant li:hover > .sousMenu { display: block; }         
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 0;
 left: 0;
}

merci de m'aider SVP
rokaya10
 

Re: sous menu

Messagepar Damien HEUTE » Jeu 01 Mars 2012 10:36

Tu utilises quel navigateur? Pour utiliser ce genre de possibilités il faut un navigateur relativement récent (encore que...)
Je viens de tester sous Firefox 3.5.2 (qui est pourtant bien vieux) et ça fonctionne même sans mettre le </ul> de fin (que tu as oublié)
Sous Chrome pas de surprise, ça fonctionne.
Sous Internet Explorer 6.0 non, ça ne marche pas

Code: Tout sélectionner
<style>
body
{
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}
#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
</style>

<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">partie11</a></li>
<li><a href="#">partie12</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">partie21</a></li>
<li><a href="#">partie22</a></li>
</ul>
</li>
</ul>
Damien HEUTE
 
Messages: 163
Inscrit le: Mer 25 Fév 2009 14:27


Retour vers CSS

Qui est en ligne ?

Utilisateur(s) parcourant actuellement ce forum : Aucun utilisateur inscrit et 1 invité

cron