Compléter une feuille de style
Bonjour,
Comme je ne veux pas réinventer la poudre, j'ai récupéré le code d'un menu déroulant vertical que j'ai adapté à mon besoin.
Sur les liens simples, je n'ai pas de problème. Par contre sur le lien qui déroule je n'arrive pas à placer le surlignage au passage de la souris.
voici le code
Bien sûr ce n'est qu'une question d'esthétique mais ...
donc maerci de votre aide
Comme je ne veux pas réinventer la poudre, j'ai récupéré le code d'un menu déroulant vertical que j'ai adapté à mon besoin.
Sur les liens simples, je n'ai pas de problème. Par contre sur le lien qui déroule je n'arrive pas à placer le surlignage au passage de la souris.
voici le code
a{text-decoration:none;color:yellow;}
a:hover{text-decoration:underline;color:yellow}
.blue:hover{color:blue; }
.blue{color:blue;}
ul {
padding : 0px;
margin-left : 1.2em;
font-family:verdana;
font-size : 0.8em;
list-style-type:none;
}
ul.menu,ul.sousmenu{list-style-type:none;margin:0em;padding:0em;}
ul.menu li.titre{margin-bottom:0.1em }
ul.sousmenu li{color:#FFFFFF;margin-left:1em;padding:0em;margin-bottom:0.2em;}
ul.sousmenu li span{color:#FFFFFF;font-size:1.2em;}
.menuli{cursor:pointer; color:yellow;}
<div id="menu"><br>
<ul>
<li><a href="index.php?page=accueil">Accueil</a></li><br>
<li><a href="index.php?page=programme">Programme</a></li><br>
<li><a href="index.php?page=association">L'Association</a><br><br>
<li onmouseover="text-decoration:underline"><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li>
<ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
<li><a href="index.php?page=histoire"><span>L'Histoire de Troissy</a></span></li>
<li><a href="index.php?page=photos"><span>Cartes anciennes</a></span></li>
<li><a href="index.php?page=eglise"><span>Église St-Martin</a></span></li>
</ul>
</li><br>
.......
</ul>
</div>
Bien sûr ce n'est qu'une question d'esthétique mais ...
donc maerci de votre aide
2 réponses
-
Bonjour
onmouseover="text-decoration:underline"
onmouseover permet d'appeler du javascript, mais toi tu mets du CSS ! Ça n'a rien à voir. Enlève ça.
Puisque tu as déjà une classe définie pour l'élément que tu veux souligner, tu as juste une pseudo-class :hover à ajouter dans le CSS :.menuli:hover {text-decoration:underline; }-
-
@philippeDe rien :-)
-
-
Re bonjour
j'ai modifié un peu mon code.
Il me reste encore 2 problèmes à résoudre :
- réduire l'espace entre le menu et le 1er sous-menu
- augmenter l'espace entre le dernier sous-menu et le menu suivantul { padding:0px; margin-left:1.1em; font-family:verdana; font-size:0.8em; list-style-type:none;} li { padding-bottom:1.0em;} ul.menu, ul.sousmenu { list-style-type:none;margin:0em;padding:0em;} ul.menu li.titre { margin-bottom:0em; } ul.sousmenu li { margin-left:0.9em; font-size:1.2em;padding-bottom:0.2em;} .menuli { cursor:pointer;color:yellow;} .menuli:hover { text-decoration:underline;} .couleur {color:#FFFFFF;} <ul> <li><a href="index.php?page=accueil">Accueil</a></li> <li><a href="index.php?page=programme">Programme</a></li> <li><a href="index.php?page=association">L'Association</a></li> <li class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li> <ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;"> <li><a href="index.php?page=histoire" class="couleur">L'Histoire de Troissy</a></li> <li><a href="index.php?page=photos" class="couleur">Cartes anciennes</a></li> <li><a href="index.php?page=eglise" class="couleur">Église St-Martin</a></li> </ul> <li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu5'));">Evènements récents</span></li> <ul class="sousmenu" id="sousmenu5" style="list-style-type:none; display: none;"> ....
Si vous avez une solution...
