2 replies [Last post]
watkino
watkino's picture
Offline
newbie
Midwest
Last seen: 9 years 30 weeks ago
Midwest
Timezone: GMT-5
Joined: 2012-06-28
Posts: 2
Points: 3

This is reference to:

http://www.rivermedia.tv/client/websites/dcc-new/dcc-eea/cbt.html

At the top of this page you'll not navigation links that begin with: [Bible Training] [Education Assistance] etc.

Currently I have a class (menu) that governs the behaviors, but for the life of me, I can't get a subclass (.active) to apply the hover attributes to an individual link once it has been selected. In other words, I want the "hover" properties that change the text to yellow and apply a graphic accent to remain in force on that page that loads when the link is selected.

The applicable code is as follows:

HTML:

    <ul id="menu">
      <li class="active"><a href="cbt.html"><span>Bible Training</span></a></li>
      <li><a href="eea.html"><span>Educational Assistance</span></a></li>
      <li><a href="../mai/index.html"><span>Martial Arts</span></a></li>
      <li><a href="contact.html"><span>Contact</span></a></li>
    </ul>

CSS:

#menu {
	overflow: hidden;
	position: absolute;
	top: 60px;
	right: 4px;
}
 
	#menu li {
		background: url(images/menu-divider.gif) no-repeat 0% 15px;
		float: left;
		margin: 0 0 0 -2px;
		padding: 0 20px 0 23px;
		font-size: 1.667em;
		font-weight: 250;
		color: #fff;
	}
 
		#menu li a {
			display: block;
			height: 51px;
			overflow: hidden;
			float: left;
			line-height: 46px;
			text-decoration: none;
			color: #fff;
		}
			#menu li a:hover, menu .active a {
				background: url(images/menu-tail.gif) repeat-x 0% 100%;
				color: #feb200;
				cursor: pointer;
			}
 
			#menu li a:hover span {
				background: url(images/menu-bg.gif) no-repeat 50% 100%;
				display: block;
				height: 51px;
				float: left;
			}
 
		#menu li.act a {
			background: url(images/menu-tail.gif) repeat-x 0% 100%;
			color: #feb200;
		}
 
			#menu li.act a span {
				background: url(images/menu-bg.gif) no-repeat 50% 100%;
				display: block;
				height: 51px;
				float: left;
			}

watkino
watkino's picture
Offline
newbie
Midwest
Last seen: 9 years 30 weeks ago
Midwest
Timezone: GMT-5
Joined: 2012-06-28
Posts: 2
Points: 3

Oops - HTML delmited

Sorry - didn't notice these comments support HTML, so I'll delimit the code:

<ul id="menu"> -->
<li class="active"><a href="cbt.html"><span>Bible Training</span></a></li>
<li><a href="eea.html"><span>Educational Assistance</span></a></li>
<li><a href="../mai/index.html"><span>Martial Arts</span></a></li>
      <li><a href="contact.html"><span>Contact</span></a></li>
</ul>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi watkino, Just use the code

Hi watkino,
Just use the code tags to enter code Wink
Here's how to get the active page highlighted