Compléter une feuille de style
philippe
-
philippe -
philippe -
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
A voir également:
- Compléter une feuille de style
- Style word - Guide
- Bruler feuille de laurier - Guide
- Feuille de pointage excel - Télécharger - Tableur
- Comment supprimer une feuille sur word - Guide
- Comment imprimer en a5 sur une feuille a4 - Guide
2 réponses
Bonjour
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 :
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; }
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 suivant
Si vous avez une solution...
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 suivant
ul { 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...
J'avais vu après mon post que je devait enlever le onmousever.
En tout cas merci pour ta réponse.