Hover Navigation –> Underlined/Differenct Color Active Page?

(@pokepsw)

I have a normal navigation setup as follows:

<div id="menu">
	<div class="widthlimiter">
		<ul id="suckerfishnav">
			<?php wp_list_pages('title_li=')?>
		</ul>
	</div>
</div>

CSS for that as follows:

#suckerfish {background:#63A9D5;font-size:18px;font-family:helvetica,sans-serif;font-weight:bold}
#suckerfishnav, #suckerfishnav ul {font-weight:bold;float:left;list-style:none;line-height:2em;padding:0;border:0px solid #aaa;margin:0 0 0 0;width:100%}
#suckerfishnav a {display:block;color:#202225;text-decoration:none;padding:0px 10px}
#suckerfishnav li {float:left;padding:0}
#suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:150px;font-weight:normal;margin:0;line-height:1}
#suckerfishnav li li {padding-right:1px;width:150px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa}
#suckerfishnav li li a {padding:4px 10px;width:150px}
#suckerfishnav li ul li {font-weight:normal; font-family:helvetica,sans-serif}
#suckerfishnav li ul li a {font-size:12px; color:#202225}
#suckerfishnav li:hover ul li a {color:#202225}
#suckerfishnav li ul ul {margin:-20px 0 0 150px}
#suckerfishnav li ul li:hover {background:#63A9D5}
#suckerfishnav li ul li:hover a {color:#202225}
#suckerfishnav li ul li:hover li a {color:#202225}
#suckerfishnav li ul li li:hover a {color:#202225}
#suckerfishnav li ul li ul li:hover ul li a {color:#202225}
#suckerfishnav li ul li ul li:hover ul li:hover a {color:#202225}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#fff}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#202225}

Imagine I have 2 pages, About and Contact. When I hover over either page, I get a hover effect (background becomes white). What I am trying to do is have that effect stay when clicked so when you click on About and the page loads, the ‘About’ on the Nav Menu stays highlighted. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

esmi

(@esmi)

17 years ago

Try:

#suckerfish .current_page_item {background:#fff}

Thread Starter

pokepsw

(@pokepsw)

17 years ago

Thanks, but that didn’t work.

esmi

(@esmi)

17 years ago

Chances are that you have something further down the CSS that is over-writing the suckerfish id but without seeing your site, it’s hard to say.

Thread Starter

pokepsw

(@pokepsw)

17 years ago

This is the entire CSS

body {margin:0;padding:0}
#header {background:#202225;width:100%;height:80px}
#header .widthlimiter div {float:right;color:#63A9D5;font:italic bold 1em/80px sans-serif;}
#search {display:inline}
#description {display:inline;margin-right:1em}
.widthlimiter {min-width:600px;max-width:1000px;width:90%;margin:0 auto}
#menu {width:100%;background:#63A9D5;height:2em}

/* NAVIGATION BAR - for an easy way to restyle this, visit ... http://ryanhellyer.net/dropdowns/ */
#suckerfish {background:#63A9D5;font-size:18px;font-family:helvetica,sans-serif;font-weight:bold}
#suckerfishnav, #suckerfishnav ul {font-weight:bold;float:left;list-style:none;line-height:2em;padding:0;border:0px solid #aaa;margin:0 0 0 0;width:100%}
#suckerfishnav a {display:block;color:#202225;text-decoration:none;padding:0px 10px}
#suckerfishnav li {float:left;padding:0}
#suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:150px;font-weight:normal;margin:0;line-height:1}
#suckerfishnav li li {padding-right:1px;width:150px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa}
#suckerfishnav li li a {padding:4px 10px;width:150px}
#suckerfishnav li ul li {font-weight:normal; font-family:helvetica,sans-serif}
#suckerfishnav li ul li a {font-size:12px; color:#202225}
#suckerfishnav li:hover ul li a {color:#202225}
#suckerfishnav li ul ul {margin:-20px 0 0 150px}
#suckerfishnav li ul li:hover {background:#63A9D5}
#suckerfishnav li ul li:hover a {color:#202225}
#suckerfishnav li ul li:hover li a {color:#202225}
#suckerfishnav li ul li li:hover a {color:#202225}
#suckerfishnav li ul li ul li:hover ul li a {color:#202225}
#suckerfishnav li ul li ul li:hover ul li:hover a {color:#202225}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#fff}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#202225}
#suckerfish .current_page_item {background:#fff}

/* MAIN CONTENT STYLING */
#content {}
h1,h2,h3,h4,h5 {color:#63A9D5}
h1 a,h2 a,h3 a,h4 a,h5 a {color:#63A9D5;text-decoration:none}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {text-decoration:underline}
h1 {margin:0;padding:0;font:normal bold 3em/80px sans-serif}
h2 {font:normal bold 2em sans-serif;margin:0.5em 0}
h3 {font:normal bold 1.6em sans-serif;margin:0.4em 0}
h4 {font:normal bold 1.3em sans-serif;margin:0.3em 0}
h5 {font:normal bold 1.2em sans-serif;margin:0.2em 0}

p {font:normal 0.8em sans-serif;color:#202225}
p a {color:#63A9D5;text-decoration:none}
p a:hover {text-decoration:underline}

ul li, ol li {font-family:sans-serif;color:#202225}

/* FOOTER STYLING */
#footer {background:#202225;width:100%;height:2em}
#footer p {font-size:0.8em;line-height:2em;color:#fff}
#footer a {color:#63A9D5;text-decoration:none}
#footer a:hover {text-decoration:underline}

Thread Starter

pokepsw

(@pokepsw)

17 years ago

Any ideas?

esmi

(@esmi)

17 years ago

Move the suckerfish block down the the bottom.

Thread Starter

pokepsw

(@pokepsw)