Bonjour,
A partir de tutoriaux, j'ai élaboré le menu déroulant suivant sur mon:
http://www.huiledolivedespagne.fr/
Mais, il utilise, de façon impropre apparemment (selon w3c), les balises dl,dt,dd. et cela ne marche pas sur Safari (mais sur IE, google et mozilla si).
J'essaye donc de le refaire, simplement avec des ul li ul li (des listes classiques).
Or je me mélange les pédales et m'y perds dans la définition des propriétés des balises.
OBJECTIF: Retrouver avec des ul li ul li ce que j'ai réussi à faire avec dl,dt,dd sur le site http://www.huiledolivedespagne.fr/
Je souhaitais que le texte des menus et sous-menus apparaissent en gris noir toujours et sans soulignement jamais.
Je souhaitais aussi, qu'au touché avec le curseur de la souris, le rectangle autour du texte apparaisse en jaune clair et que les textes avec liens (seulement ceux qui ont des liens) la police apparaisse en rouge (ceux sans liens restent gris noir).
Enfin, je souhaitais que, pour le menu, le fait d'avoir déjà clicqué sur un lien ne modifie pas l'apparence des textes dans les menus après. Ils restent gris noirs et changent seulement s'il y a un lien quand le cursor de la souris le touche.
Voici le nouveau menu html:
Et ma tentative ratée de réadapter le CSS:
Quelqu'un peut-il me donner un coup de main et m'expliquer un peu ce que j'ai mal fait?
Merci d'avance
A partir de tutoriaux, j'ai élaboré le menu déroulant suivant sur mon:
http://www.huiledolivedespagne.fr/
Mais, il utilise, de façon impropre apparemment (selon w3c), les balises dl,dt,dd. et cela ne marche pas sur Safari (mais sur IE, google et mozilla si).
J'essaye donc de le refaire, simplement avec des ul li ul li (des listes classiques).
Or je me mélange les pédales et m'y perds dans la définition des propriétés des balises.
OBJECTIF: Retrouver avec des ul li ul li ce que j'ai réussi à faire avec dl,dt,dd sur le site http://www.huiledolivedespagne.fr/
Je souhaitais que le texte des menus et sous-menus apparaissent en gris noir toujours et sans soulignement jamais.
Je souhaitais aussi, qu'au touché avec le curseur de la souris, le rectangle autour du texte apparaisse en jaune clair et que les textes avec liens (seulement ceux qui ont des liens) la police apparaisse en rouge (ceux sans liens restent gris noir).
Enfin, je souhaitais que, pour le menu, le fait d'avoir déjà clicqué sur un lien ne modifie pas l'apparence des textes dans les menus après. Ils restent gris noirs et changent seulement s'il y a un lien quand le cursor de la souris le touche.
Voici le nouveau menu html:
<nav>
<div id="menu">
<ul>
<li><a href="index.html">ACCUEIL</a></li>
<li>ZONES DE PRODUCTION
<ul>
<li><a href="geographique.html">Répartition géographique</a></li>
<li><a href="AOP.html">Carte des variétés et AOPs</a></li>
<li><a href="poids.html">Poids des variétés</a></li>
</ul>
</li>
<li>VARIÉTÉS D'OLIVE
<ul>
<li><a href="picual.html">Picual</a></li>
<li><a href="cornicabra.html">Cornicabra</a></li>
<li><a href="hojiblanca.html">Hojiblanca</a></li>
<li><a href="picudo.html">Picudo</a></li>
<li><a href="arbequina.html">Arbequina</a></li>
<li><a href="empeltre.html">Empeltre</a></li>
</ul>
</li>
<li>RECETTES</li>
<ul>
<li><a href="cuisineethuile.html">Une huile pour chaque plat</a></li>
<li><a href="papillotes.html">Papillotes de Loup</a></li>
<li><a href="filetmignon.html">Filet Mignon Ibérique</a></li>
<li><a href="glacehuiledolive.html">Glace à l'huile d'olive</a></li>
</ul>
</li>
</ul>
<p><br/></p>
</div>
</nav>Et ma tentative ratée de réadapter le CSS:
/* MENU */
#menu ul{text-decoration: none; list-style: none; margin: 0px auto; padding: 0px; width: 57em; height: 40px; text-align: center; text-transform: none; font-family: "Trebuchet MS", Arial; font-weight: bold; display: block; position: relative; z-index: 7;}
#menu li {background: white; margin: 0px; padding: 0px; float: left; display: block;}
#menu li a {text-decoration: none; margin: 0px; padding: 0px; text-align: center; color: rgb(24, 24, 24); font-weight: bold; text-decoration: none;}
#menu li:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(24, 24, 24);}
#menu li a:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15);}
#menu li:visited,#menu li a:visited {text-decoration: none; color: rgb(24, 24, 24);}
/* sous-menus */
#menu li ul li { background: rgb(255, 255, 196); margin: 0px; padding: 0px; display: block; z-index: 7;font-weight: normal;}
#menu li ul li {background: white; margin: 0px; padding: 0px; display: block; z-index: 7;}
#menu li ul li a {text-decoration: none; width: 14em; height: 30px; color: rgb(24, 24, 24); line-height: 30px; display: block; z-index: 7;}
#menu li ul li a:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15); z-index: 7;}
#menu li ul li a:visited {text-decoration: none; color: rgb(24, 24, 24); z-index: 7;}
#menu li ul li {display: none;}
#menu li:hover #menu li ul li { display: block;}Quelqu'un peut-il me donner un coup de main et m'expliquer un peu ce que j'ai mal fait?
Merci d'avance