Ik zou graag willen dat als iemand mijn site bezoekt, en hij op een menukopje klikt dat dat menu kopje dan oranje blijft, dus waar de bezoeker zich bevind, heb al veel geprobeert. het luk niet. Dit is mijn css:


body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img01.gif) repeat-x left top;
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 12px;
	color: #A19D9A;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #810988;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.8em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #C25700;
}

a:hover {
}

#wrapper {
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header-wrapper {
	height: 146px;
}

#header {
	width: 950px;
	margin: 0 auto;
	padding: 0px 0px 0px 30px;
}

/* Logo */

#logo {
	float: left;
	width: 350px;
	margin-top: 10px;
	padding: 0;
	color: #B55100;
	background: url(images/img02.jpg) no-repeat left 15px;
        font-size: 5em;
}

#logo h1, #logo p {
}

#logo h1 {
	padding: 40px 0px 0px 0px;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-size: 3.8em;
	background: redc;
}

#logo p {
	margin-top: 10px;
	padding: 0px 0 0 0px;
	font: normal 14px Calibri, "Times New Roman", Times, serif;
	font-style: italic;
	color: #B55100;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #B55100;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 40px;
	padding: 0px;
}

#search form {
	height: 40px;
	margin: 0;
	padding: 0px 0 0 10px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 170px;
	padding: 6px 5px 2px 5px;
	border: 1px solid #DEDEDE;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Calibri, Helvetica, sans-serif;
	color: #5D781D;
}

#search-submit {
	width: 50px;
	height: 22px;
	border: none;
	background: #B9B9B9;
	color: #000000;
}

/* Menu */

#menu {
	width: 1150px;
	height: 90px;
}

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

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-right: 1px;
	padding: 10px 20px 15px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #B55100;
	border: none;
}

#menu a:hover, #menu .current_page_item a{
	background: #FE7805;
	text-decoration: none;
	color: #FFFFFF;
}

#menu .current_page_item a {
}

/* Page */

#page {
	width: 990px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	background: url(images/img03.jpg) repeat-y left top;
}

#page-bgtop {
	padding: 40px 0px 20px 0px;
	background: url(images/img02.jpg) no-repeat left top;
}
/* Content */

#content {
	float: left;
	width: 650px;
	padding: 0px 0px 0px 0px;
}

.post {
	margin-bottom: 40px;
	border-bottom: 1px dotted #E7E2DC;
}

.post .title {
	height: 41px;
	padding: 7px 0px 0px 30px;
	letter-spacing: -.5px;
}

.post .title a {
	border: none;
	color: #C25700;
}

.post .meta {
	margin-bottom: 30px;
	padding: 0px 30px 0px 30px;
	text-align: left;
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
}

.post .meta .date {
	float: left;
}

.post .meta .posted {
	float: right;
}

.post .meta a {
}

.post .entry {
	padding: 0px 30px 20px 30px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	padding-top: 20px;
	font-size: 12px;
	font-weight: bold;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 300px;
	margin: 0px;
	padding: 0px 20px 0px 0px;
	color: #FFFFFF;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px dotted #E7E2DC;
	margin: 0px 30px;
	border-left: none;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar li li a {
	padding: 0px 0px 0px 15px;
	background: url(images/img01.jpg) no-repeat left 5px;
}

#sidebar h2 {
	height: 38px;
	padding-left: 30px;
	letter-spacing: -.5px;
	font-size: 1.8em;
	color: #FFFFFF;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 30px 20px 30px;
	text-align: justify;
}

#sidebar a {
	border: none;
	color: #FFFFFF;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 30px 0;
	font-family: Calibri, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 40px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #404040;
}

#footer a {
	color: #404040;
}
Je moet met php controleren ofdat de huidige pagina gelijk is aan het menu-item, zo ja geef hem een customer class. a:active is puur het click-event en wordt dus gereset na het laden van een andere pagina.

voorbeeld; http://www.w3schools.com/cssref/sel_active.asp

Reageren