Jump to content
Sign in to follow this  
lorinthal

Menu deroulant horizontal CSS

Rate this topic

Recommended Posts

Je suis en train de développer un site en php. J'ai fait un CSS pour le menu horizontal dont voici le code :

#menu
{
vertical-align:middle;
}

#menuDeroulant
{
list-style-type: none; /*empêche l'affichage des puces */
margin: 0;
padding: 0;
}

#menuDeroulant ul
{
position: absolute;
margin:0px;
padding: 0px;
}

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

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

#menuDeroulant ul li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: none;
border-right: none;

}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
margin: 0;
padding: 4px 8px;
border-right: none;
text-decoration: none;
}

#menuDeroulant li a:hover { background-color: #9d9a9a; } /* fond du menu au passage de la souris - hover : quand la souris est sur le lien*/
#menuDeroulant li a:active { background-color: #FBEACE; } /* fond du menu déroulant - active : style particulier au moment du clic*/
#menuDeroulant li:hover ul { display: block; }

#menuDeroulant ul li a:link,
#menuDeroulant ul li a:visited
{
display: block;
color: white;
margin: 0;
border: 0;
text-decoration: none;
background: #bb6767;
}

#menuDeroulant ul li a:hover
{
background-image: none;
background-color: 9d9a9a; /* pour la surbrillance du menu déroulant au passage de la souris*/
color: #f7e0ca;
}

La partie html est toute simple :

<!--  Menu haut-->
<ul id="menuDeroulant">
<li>
<a href="../index.php" title="">Accueil</a>
</li>
<li>
<a href="page1.php" title="">menu1</a>
<ul>
<li><a href="#" title="">Option1</a></li>
<li><a href="#" title="">Option 2</a></li>
</ul>
</li>
<li>
<a href="page2.php" title="">menu2</a>
<ul>
<li><a href="#" title="">Option1</a></li>
<li><a href="#" title="">Option 2</a></li>
</ul>
</li>
<li>
<a href="page3.php" title="">menu3</a>
<ul>
<li><a href="#" title="">Option1</a></li>
<li><a href="#" title="">Option 2</a></li>
</ul>
</li>
</ul>

C'est pour le boulot, j'ai déjà essayer plein de code sur différent sites sans succès. J'ai déjà perdu du temps en recherchant alors maintenant je vous demande de m'aider s'il vous plaît... Le problème est dans la description du sujet.

Merci d'avance de prendre le temps de me lire.

Lorinthal

Share this post


Link to post
Share on other sites

Je fais une réponse pour détailler un truc. Je suis nouvelle sur ce site et quand j'ai voulu faire editer cela n'a pas fonctionner. Tant pis :

l'erreur se situe à ce niveau là :

#menuDeroulant li:hover ul { display: block; }

Apparemment IE7 ne comprend pas cette ligne. Par quoi puis-je la remplacer ?

Share this post


Link to post
Share on other sites

Salut

Je ne sais pas si Explorer 7 prend en compte les :hover sur d'autres balises que <a> (je sais qu'IE 6 ne prenait en compte que les <a>, ce qui était une erreur).

Essaie peut-être

#menuDeroulant li a:hover ul {display: block;}

Sans garantie car pas testé, je n'ai pas Explorer sur ma machine :unsure:

PS: effectivement, les nouveaux membres ont des possibilités d'édition limitées. Petit à petit, au fur et à mesure de ton activité sur le Hub, ces limitations s'assoupliront automatiquement.

Share this post


Link to post
Share on other sites

Salut,

Merci d'avoir pris le temps de me répondre car tu es bien le seul jusqu'à maintenant. Je sais que le css est un sujet que beaucoup abordé dans les forums.

J'ai déjà testé ton idée mais cela n'avait pas fonctionner.

A force de persévérance, j'ai cependant fini par trouver un code css tout fait avec un exemple et deux fichiers javascript qui fonctionne aussi bien sous Firefox 3 et sous IE7. Je suis en train de l'adapter à ma sauce. Maintenant, c'est un souci de décalage sous IE qu'il n'y a pas sous Firefox, mais je sais que beaucoup ont déjà eu ce problème alors je ne devrais pas avoir de souci à trouver une solution.

Voilà l'endroit où j'ai trouvé un bon code !

http://dosimple.ch/articles/Menus-dynamiqu...nuVertical.html

Merci encore !

Lorinthal

Euh... question ! Y aurait pas un endroit pour dire que le problème est résolu ?

Lorinthal.

Share this post


Link to post
Share on other sites

Bonjour,

Ton code initial devrait fonctionner pour ie7 à condition de l'intégrer dans un code ayant un doctype valable sinon, ce charmant jeune homme passe en mode quirks et là on a des surprises... voir là

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Par exemple...

Pour l'espace entre les li du sous menu, tente de modifier:

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
margin: 0;
padding: 4px 8px;
border-right: none;
text-decoration: none;
}

par...


#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;/*----------------*/
margin: 0;
padding: 4px 8px;
border-right: none;
text-decoration: none;
}

Share this post


Link to post
Share on other sites

Salut !

Désolée de ne répondre que maintenant.

Le problème venait du doctype qui n'était pas complet effectivement !

Mon menu marche nickel maintenant ! Merci beaucoup !

A la prochaine !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...