Votre question

Menu deroulant css

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
6 Novembre 2008 17:48:06

Bonjour,
j'essaye de faire un menu deroulant en css sans javascript mais j'ai un proble car le menu ne se deroule pas.

HTML

<body>

<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>
<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>
<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>
<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocats</a></li>
</ul>
</li>
</ul>


</body>





CSS

body
{
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding;
}

#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}

#menuDeroulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant .sousMenu
{
display:none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}

#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 li:hover > .sousMenu { display: block; }


Voila si quelqu'un peut m'aider.

Merci d'avance

Autres pages sur : menu deroulant css

7 Novembre 2008 11:41:17

mais en fait ca fonctionne mais pas sur IE7 et frontpage
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS