Geselecteerd menu andere kleur

[Syphera]

Ik wil graag het geselecteerde menu een andere kleur geven en het wil me maar niet lukken.
Deze code heb ik tot dus ver:


/* Menu */

#menu-wrapper {
overflow: hidden;
height: 56px;
background: #045FB4;
border-top: 1px solid #3D2729;
}

#menu {
width: 1000px;
height: 55px;
margin: 0px auto;
padding: 0px;
}

#menu ul {
margin: 0;
padding: 10px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
border-right: 1px solid #000000;
}

#menu a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Verdana', serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}

#menu a:hover {
background: #40FF00;
border-radius: 8px;
text-decoration: none;
color: #3D2729;

het hoveren gaat goed,want dan zie ik een andere kleur, maar als ik dan op het menu item klik dan verdwijnt de kleur weer.
Wat doe ik fout?

Groet,
Michel

 

[M138A]

Om de kleur te behouden kun je 'active' gebruiken.

#menu a:hover, a:active {	
background: #40FF00;	
border-radius: 8px;	
text-decoration: none;	
color: #3D2729;	}

 

[Syphera]

Dank voor je reactie, maar het werkt bij mij niet.

 

[M138A]

Sorry, het is een foutje van mij.

#menu

moest achter

:active

.
Dan wordt het dus:

a:active#menu, a:hover#menu {	
background: #40FF00;	
border-radius: 8px;	
text-decoration: none;	
color: #3D2729;

Hopelijk doet hij het nu wel.

 

[Syphera]

Nu werkt zelfs de hover functie niet meer.

 

[M138A]

Wat is de code in het html/php bestand?
Misschien zit daar iets.

 

[Syphera]

<div id="menu">
<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
<li><a href="#">Home 6</a></li>
</ul>
</div>

 

[Syphera]

<div id="menu">
<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
<li><a href="#">Home 6</a></li>
</ul>
</div>

 

[bron]

Het zal niet lukken met :active. Zodra je op het linkje klikt kom je op de betreffende pagina en dan is "a:active" weg.
Je kunt het oplossen met een class op de actieve pagina.

<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<[COLOR="#000080"]li class="current">[/COLOR]<a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
</ul>

In je css kun je dan zetten:
#menu .current { background: #....; }

 

[Syphera]

Bedankt, want dit is de oplossing waar ik naar op zoek was.
De rest ook erg bedankt voor het meedenken!

gr,Michel