Bonjour à tous et à toutes !

Je fais un blog sur overblog, j'ai choisi le thème "twentyeleven" que l'on peut d'ailleurs trouver en thème de base sur wordpress ! Pour personnaliser mon template, j'ai donc décidé de toucher au code, mais voici mon problème:

je voudrais, une fois que je clique sur une catégorie du menu , que cette catégorie soit soulignée ! Ca fonctionne pour l'accueil mais pas pour les autres catégories ! Je vais vous montrer les 3 méthodes que j'ai essayé ! La classe "selected" (#menu li.selected) dans le css de base de mon template est la classe qui concerne justement les catégories une fois cliquées !

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#menu {
	background: #ffde20;
	background: -webkit-linear-gradient( #ffde20, #ffe857);
	   background: -moz-linear-gradient(#ffde20, #ffe857);
		 background: -o-linear-gradient(#ffde20, #ffe857);
			background: linear-gradient(#ffde20, #ffe857);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
		-ms-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
		 -o-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
			box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	margin: 0 auto 6px;
	width: 100%;
}
	#menu ul {
		font-size: 13px;
		list-style: none;
		margin-left: 50px;
	}
		#menu li {
			display: inline;
		}
		#menu li.selected a {
			font-weight:bold;
			text-decoration:underline;
		}
			#menu a,
			#menu a:visited {
				color: #34619b;
				display: block;
				float: left;
				line-height: 40px;
				padding: 0 16px;
				text-decoration: none;
				text-transform: capitalize;
				font-weight:bold;
			}
			#menu a:hover {
				color: #d4e7fb;
				background: #3f6ca7;
				background: -webkit-linear-gradient(#3f6ca7, #9fcfff);
				   background: -moz-linear-gradient(#3f6ca7, #9fcfff);
					 background: -o-linear-gradient(#3f6ca7, #9fcfff);
						background: linear-gradient(#3f6ca7, #9fcfff);
				border-radius:5px;
			}
Ensuite j'ai tenté ça ( là je ne vous remet plus que ce qui concerne le .selected):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
#menu li.selected {
	font-weight:bold;
	text-decoration:underline;
}
et pour finir, j'ai essayé ça:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
#menu li.selected a:visited{
	font-weight:bold;
	text-decoration:underline;
}
Dans le premier cas , ca fonctionne mais juste pour la catégorie "accueil" ! Ce que je trouve c'est que la classe .selected est censé regrouper toutes les catégories une fois cliquées ! Je ne comprends d'où vient l'erreur ! Pouvez-vous m'aider ?

Merci d'avance !