Compléter un code css pour un menu vertical

Version imprimable

Bonjour,
Comme je ne veux pas réinventer la poudre, j'ai récupéré un code pour un menu vertical.
Tout fonctionne correctement. Je voudrai juste faire un "text-decoration:underline" sur le lien(!) qui affiche le sous menu.
page index :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<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><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>&Eacute;glise St-Martin</a></span></li>
				<li><a href="index.php?page=crypte"><span>La Crypte</a></span></li>
				<li><a href="index.php?page=temple"><span>Le Temple</a></span></li>
				<li><a href="index.php?page=abbaye"><span>Abbaye de l'Amour-Dieu</a></span></li>
			</ul>
 
....

le code css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a{text-decoration:none;color:yellow;}
a:hover{text-decoration:underline;color:yellow}
 
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;}

Et s'il y a du code qui vous chagrine, ne vous gênez pas, je suis preneur !!

14/11/2015, 09h52
JefReb
Je n'ai pas pu aller bien loin pour essayer car il manque un javascript dans le code.
Mais j'ai eu ce cas que j'avais résolu par:
Code:

1 2 3 4 5 6 .menu li:hover > a { background:red; text-decoration:underline; color:#000; }
évidemment les couleurs sont à changer.
Si ça peut aider?
14/11/2015, 11h21
Invité

Bonjour,

je ne sais pas où tu as trouvé le script, mais même le code HTML est moisi... (<br> ?? <span> ???)

Galerie CSS - Menus verticaux

Sinon, j'ai ça à te proposer : http://codepen.io/jreaux62/pen/dPxKKQ
Pour qu'il soit toujours vertical : supprimer la partie "responsive" du CSS (@media...)

N.B. En HTML5, un menu se met dans une balise <nav> (navigation).
14/11/2015, 13h59
philippef

Le script je l'ai trouvé sur le web et j'ai essayé de l'adapter à mes besoins.
Je suis conscient que <br> et <span> n'ont rien à faire là et que je dois gérer ça pas le css. Mais bon ...

Je ne connais pas cette balise <nav>, je vais regarder.
En tout cas merci.
14/11/2015, 14h11
Invité
- HTML5 : le guide du débutant

J'ai modifié mon code : plus de <br> et plus de <span>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
a{text-decoration:none;color:yellow;}
a:hover{text-decoration:underline;color:yellow}
 
ul { padding:0px; margin-left:1.2em; 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:1em; font-size:1.2em; padding-bottom:0.2em;}
.menuli { cursor:pointer;color:yellow;}
.menuli:hover { text-decoration:underline;}
 
	<nav>
		<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 class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</li>
			<ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=histoire">L'Histoire de Troissy</a></li>
				<li><a href="index.php?page=photos">Cartes anciennes</a></li>
				<li><a href="index.php?page=eglise">&Eacuteglise St-Martin</a></li>
				<li><a href="index.php?page=crypte">La Crypte</a></li>
				<li><a href="index.php?page=temple">Le Temple</a></li>
				<li><a href="index.php?page=abbaye">Abbaye de l'Amour-Dieu</a></li>
			</ul>
....
</nav>

il mes reste 3 choses que je n'arrive pas à faire :
- mettre les sous menus en blanc
- réduire l'espace entre le titre du menu et le 1er sous-menu
- augmenter l'espace entre le dernier sous-menu et le menu suivant

14/11/2015, 17h32
philippef

J'ai réglé le problème de la couleur des sous-menus en ajoutant une classe