Tom's Guide > Forum > Programmation > Menu deroulant css

Menu deroulant css

Forum Programmation : Menu deroulant css

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
catalanman   06-11-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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
CleverZ   06-11-2008 à 19:00:35
- 0 +

Je te conseille de prendre un générateur de menu déroulant :

http://www.tonwebmaster.com/genera [...] ulant.php3

Tu auras moins de problème je pense :)

Répondre à CleverZ
catalanman   07-11-2008 à 11:41:17
- 0 +

mais en fait ca fonctionne mais pas sur IE7 et frontpage

Répondre à catalanman
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Menu deroulant css
Aller à :

Il y a 1172 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,342 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens