?
Solved

Need to highlight current page in navigation bar

Posted on 2009-02-22
8
Medium Priority
?
829 Views
Last Modified: 2013-11-19
Dear fellow developers:

I am having problems highlighting the current page on the vertical navigation bar.  I am not sure why this is.  I have attached my HTML code, for my main page, the CSS code, and the image of the arrow that should appear.   Because there are submenus that also appear, if a submenu is selected, I would like the parent, as well as the submenu navigation bar to be highlighted.  

I thought this block would have taken care of it:

#home #navigation .home a,
#aboutus #navigation .aboutus a{
      background-color: #407273;
      background-image: url(../images/menuitem-hover.gif);
      color: white;
}


Unfortunately, it didn't.  Any ideas?

Thanks to all who reply.
Sincerely;
Fayyaz

HTML code:
---------------
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>McNickel and Associates</title>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="home">
<div id="main">
	<div id="header">
		<strong class="logo"><a href="#">PrivateLawyer</a></strong>
		<div class="header-area">
			<ul id="navigation">
				<li><a href="#">Home</a></li>
				<li><a href="aboutus.html">About us</a></li>
				<li>
					<a href="#">Employers</a>
					<ul>
						<li><a href="#">Full Time Permanent Staffing</a></li>
						<li><a href="#">Contract Staffing</a></li>
						<li>
							<a href="#">Temporary Staffing</a>
							<ul>
								<li><a href="#">administration</a></li>
								<li><a href="#">labour</a></li>
								
							</ul>
						</li>
						<li><a href="#">Testing</a></li>
						<li><a href="#">Reference Checks</a></li>
						<li><a href="#">Outplacment</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Job seekers</a>
					<ul>
						<li><a href="#">Full Time Permanent</a></li>
						<li><a href="#">Contract Staffing</a></li>
						<li><a href="#">Immediate Staffing</a></li>
							<ul>
								<li><a href="#">administration</a></li>
								<li><a href="#">labour</a></li>
								
							</ul>
						<li><a href="#">Testing</a></li>
					</ul>
				</li>
				<li><a href="#">Testing</a></li>
				<li><a href="#">Outplacement</a></li>
				<li><a href="#">Contact / Office Locations</a></li>
			</ul>
			<img src="images/headerarea-img2c.jpg" alt="" />
		</div>
		<div class="slogan-holder">
			<span class="slogan">Making your life at work easier</span>
		</div>
	</div>
	<div id="content">
		<div class="content-area">
			<div class="welcome">
				<img src="images/content-img1.jpg" alt="" />
				<div class="welcome-text">
					<h1>welcome to our web site</h1>
					<strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong>
					<p>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta</a> <a href="#">sunt, explicabo</a> nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.</p>
				</div>
			</div>
			<div class="columns-holder">
				<div class="column1">
					<h2>Testimonials</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<blockquote cite="#">
						<q>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto</q>
						<cite>Bob Stanley</cite>
					</blockquote>
				</div>
				<div class="column2 about">
					<h2>About Us</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
				</div>
			</div>
		</div>
		<div class="sidecolumn">
			<h2>Latest News</h2>
			<ul class="headlines">
				<li>
					<span class="date">January 23th, 08</span>
					<strong>Amet, consectetuer adipis cing</strong>
					<p>elit sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet</a> dolore</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
				<li>
					<span class="date">September 12th, 08</span>
					<strong>Consectetuer adipis cing elit</strong>
					<p>sed diam  volutpat.  Ut wisi enim ad minim veniamuis nostrud exerci tation ullamc orper</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<strong>Copyright &copy; 2008 Busness Company. All Rights Reserved.</strong>
		<ul>
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Privacy Policy</a></li>
		</ul>
	</div>
</div>
</body>
</html>
 
-------------
CSS code:
-------------
 
body {
	font: 11px Tahoma, Arial, sans-serif;
	background:#265051;
	color:#fff;
	margin:0;
}
form {
	margin:0;
	padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
	text-decoration: underline;
	color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
	overflow: hidden;
	width: 100%;
}
#main {
	margin:0 auto;
	width:780px;
	overflow:hidden;
	position:relative;
}
/* header block styles */
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding: 93px 0 0;
	width: 100%;
	height:310px;
	overflow:hidden;
}
#header .header-area {
	background: #fff;
	overflow: hidden;
	padding: 1px 0;
	width: 100%;
	height: 253px;
	clear: both;
}
#header .header-area img {
	float: right;
}
/* logo styles */
#header strong.logo {
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
	width: 433px;
	height: 93px;
	margin: -93px 0 0 20px;
}
#header strong.logo a {
	position: relative;
	cursor: pointer;
	display: block;
	height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
	background: url(../images/bg-slogan.png) repeat-x;
	overflow: hidden;
	height: 55px;
}
#header span.slogan {
	background: url(../images/slogan.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: right;
	width: 585px;
	height: 55px;
}
/* navigation menu styles */
#navigation {
	font: bold 15px/15px Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	text-transform: uppercase;
	background: #aec2c3;
	list-style: none;
	padding: 13px 0 0;
	margin: 0;
	width: 227px;
	height: 100%;
	float: left;
}
#navigation li {
	margin: 0 0 6px;
	width: 100%;
	float: left;
}
#navigation a {
	padding: 6px 0 4px 93px;
	text-decoration: none;
	color: #fff;
	background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
	/* uncomment this line for light grey color */
	/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
	display: block;
	width: 134px;
}
#navigation a:hover,
#navigation a.active {
	background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
	position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
	background: #aec2c3;
	position: absolute;
	list-style: none;
	display: none;
	padding: 6px 0 0;
	margin: 0;
	left: 217px;
	top: -6px;
	width: 270px;
}
#navigation ul a {
	background-position: 10px 10px !important;
	padding: 6px 5px 4px 30px;
	width: 235px;
}
#navigation ul ul {
	left: 260px;
	width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
 
#home #navigation .home a,
#aboutus #navigation .aboutus a{
	background-color: #407273; 
	background-image: url(../images/menuitem-hover.gif);
	color: white;
}
/* content block styles */
#content {
	background: url(../images/bg-content.png) repeat-y;
	padding: 0 0 22px;
	overflow:hidden;
	width: 100%;
}
#content .content-area {
	margin: 0 0 0 28px;
	overflow: hidden;
	padding: 25px 18px 0;
	display: inline;
	width: 476px;
	float: left;
}
#content h1, #content h2 {
	font: 20px/20px "Times New Roman", Times, serif;
	text-transform: uppercase;
	margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
	background: #067d81;
	padding: 14px 30px 14px 15px;
	margin: 0 0 17px;
	overflow: hidden;
	width: 430px;
}
#content .welcome img {
	border: 1px solid #fff;
	margin: 3px 0 0;
	float: left;
}
#content .welcome .welcome-text {
	width: 315px;
	float: right;
}
#content .welcome strong {
	margin: 0 0 5px;
	display: block;
}
#content .welcome a {
	color: #e79836;
}
#content .welcome p {
	line-height: 18px;
	margin: 0;
}
/* content columns block styles */
#content .columns-holder {
	background: url(../images/bg-divider.png) repeat-y 214px 0;
	overflow: hidden;
	clear: both;
	width: 520px;
}
#content .columns-holder .column1 {
	padding: 0 20px;
	width: 179px;
	float: left;
}
#content .columns-holder .column2 {
	padding: 0 84px 0 20px;
	width: 160px;
	float: left;
}
#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}
 
#content .columns-holder p,
#content .columns-holder q {
	line-height: 17px;
	margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
	color: #adc2c2;
	font-weight: bold;
	font-style: italic;
	display: block;
	text-align: right;
	padding: 0 4px 0 0;
	margin: 0;
}
/* side column block styles */
#content .sidecolumn {
	padding: 35px 29px 20px 35px;
	width: 176px;
	float: right;
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
	list-style: none;
	padding: 0;
	margin: 0;
}
#content ul.headlines li {
	padding: 0 0 22px;
}
#content ul.headlines span.date {
	color: #14989b;
	display: block;
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: bold;
}
#content ul.headlines strong {
	display: block;
	color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
	font-weight: bold;
	font-size: 9px;
	padding: 15px 0 0;
	text-align: right;
	display: block;
}
#content ul.headlines span.read-more a {
	background: url(../images/readmore.gif) no-repeat 0 50%;
	padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
	background: url(../images/bg-footer.png) repeat-y;
	padding: 9px 0;
	overflow:hidden;
	width:100%;
}
/* copyright string styles */
#footer strong {
	padding: 0 0 0 46px;
	font-weight: normal;
	color: #819d9d;
	float: left;
}
/* footer navigation styles */
#footer ul {
	overflow: hidden;
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0 20px 0 0;;
	float: right;
}
#footer ul li {
	background: url(../images/separator1.gif) no-repeat 100% 50%;
	margin: 0 -1px 0 0;
	padding: 0 13px 0 14px;
	float: left;
}
#footer a {color:#14989b;}

Open in new window

menuitem-hover.gif
0
Comment
Question by:fsyed
  • 4
  • 3
8 Comments
 

Author Comment

by:fsyed
ID: 23708572
I have figured out how to highlight the main navigation menu, however, I am unable to figure out how to selectively highlight the submenu's.  When I select a navigation bar in the menu which has submenus, I find that all submenu's are also selected.  How do I make it such that only the submenu item that is selected is highlighted?

Below is my modified html and css code.

Thanks again to everyone.

Sincerely;
Fayyaz
html code:
-------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>McNickel and Associates</title>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="home">
<div id="main">
	<div id="header">
		<strong class="logo"><a href="#">PrivateLawyer</a></strong>
		<div class="header-area">
			<ul id="navigation">
				<li class="home"><a href="#">Home</a></li>
				<li class="aboutus"><a href="aboutus.html">About us</a></li>
				<li class="employers">
					<a href="employers.html">Employers</a>
					<ul>
						<li class="ftpstaffing"><a href="ftpstaffing.html">Full Time Permanent Staffing</a></li>
						<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
						<li class="tstaffing">
							<a href="tstaffing.html">Temporary Staffing</a>
							<ul>
								<li class="eadmin"><a href="eadmin.html">administration</a></li>
								<li class="elabour"><a href="elabour.html">labour</a></li>
								
							</ul>
						</li>
						<li class="testing"><a href="testing.html">Testing</a></li>
						<li class="refchecks"><a href="refchecks.html">Reference Checks</a></li>
						<li class="outplacement"><a href="outplacement.html">Outplacment</a></li>
					</ul>
				</li>
				<li class="jobseekers">
					<a href="jobseekers.html">Job seekers</a>
					<ul>
						<li class="ftpermanent"><a href="ftpermanent.html">Full Time Permanent</a></li>
						<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
						<li class="istaffing.html"><a href="istaffing.html">Immediate Staffing</a></li>
							<ul>
								<li class="jadmin"><a href="jadmin.html">administration</a></li>
								<li class="jlabour"><a href="jlabour.html">labour</a></li>
								
							</ul>
						<li class="testing"><a href="testing.html">Testing</a></li>
					</ul>
				</li>
				<li class="testing"><a href="testing.html">Testing</a></li>
				<li class="outplacement"><a href="outplacement.html">Outplacement</a></li>
				<li class="contact"><a href="contact.html">Contact / Office Locations</a></li>
			</ul>
			<img src="images/headerarea-img2c.jpg" alt="" />
		</div>
		<div class="slogan-holder">
			<span class="slogan">Making your life at work easier</span>
		</div>
	</div>
	<div id="content">
		<div class="content-area">
			<div class="welcome">
				<img src="images/content-img1.jpg" alt="" />
				<div class="welcome-text">
					<h1>welcome to our web site</h1>
					<strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong>
					<p>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta</a> <a href="#">sunt, explicabo</a> nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.</p>
				</div>
			</div>
			<div class="columns-holder">
				<div class="column1">
					<h2>Testimonials</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<blockquote cite="#">
						<q>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto</q>
						<cite>Bob Stanley</cite>
					</blockquote>
				</div>
				<div class="column2 about">
					<h2>About Us</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
				</div>
			</div>
		</div>
		<div class="sidecolumn">
			<h2>Latest News</h2>
			<ul class="headlines">
				<li>
					<span class="date">January 23th, 08</span>
					<strong>Amet, consectetuer adipis cing</strong>
					<p>elit sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet</a> dolore</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
				<li>
					<span class="date">September 12th, 08</span>
					<strong>Consectetuer adipis cing elit</strong>
					<p>sed diam  volutpat.  Ut wisi enim ad minim veniamuis nostrud exerci tation ullamc orper</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<strong>Copyright &copy; 2008 Busness Company. All Rights Reserved.</strong>
		<ul>
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Privacy Policy</a></li>
		</ul>
	</div>
</div>
</body>
</html>
 
----------------
CSS code:
----------------
 
body {
	font: 11px Tahoma, Arial, sans-serif;
	background:#265051;
	color:#fff;
	margin:0;
}
form {
	margin:0;
	padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
	text-decoration: underline;
	color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
	overflow: hidden;
	width: 100%;
}
#main {
	margin:0 auto;
	width:780px;
	overflow:hidden;
	position:relative;
}
/* header block styles */
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding: 93px 0 0;
	width: 100%;
	height:310px;
	overflow:hidden;
}
#header .header-area {
	background: #fff;
	overflow: hidden;
	padding: 1px 0;
	width: 100%;
	height: 253px;
	clear: both;
}
#header .header-area img {
	float: right;
}
/* logo styles */
#header strong.logo {
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
	width: 433px;
	height: 93px;
	margin: -93px 0 0 20px;
}
#header strong.logo a {
	position: relative;
	cursor: pointer;
	display: block;
	height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
	background: url(../images/bg-slogan.png) repeat-x;
	overflow: hidden;
	height: 55px;
}
#header span.slogan {
	background: url(../images/slogan.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: right;
	width: 585px;
	height: 55px;
}
/* navigation menu styles */
#navigation {
	font: bold 15px/15px Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	text-transform: uppercase;
	background: #aec2c3;
	list-style: none;
	padding: 13px 0 0;
	margin: 0;
	width: 227px;
	height: 100%;
	float: left;
}
#navigation li {
	margin: 0 0 6px;
	width: 100%;
	float: left;
}
#navigation a {
	padding: 6px 0 4px 93px;
	text-decoration: none;
	color: #fff;
	background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
	/* uncomment this line for light grey color */
	/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
	display: block;
	width: 134px;
}
#navigation a:hover,
#navigation a.active {
	background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
	position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
	background: #aec2c3;
	position: absolute;
	list-style: none;
	display: none;
	padding: 6px 0 0;
	margin: 0;
	left: 217px;
	top: -6px;
	width: 270px;
}
#navigation ul a {
	background-position: 10px 10px !important;
	padding: 6px 5px 4px 30px;
	width: 235px;
}
#navigation ul ul {
	left: 260px;
	width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
 
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing{
	background-color: #407273; 
	background-image: url(../images/menuitem-hover.gif);
	color: white;
}
/* content block styles */
#content {
	background: url(../images/bg-content.png) repeat-y;
	padding: 0 0 22px;
	overflow:hidden;
	width: 100%;
}
#content .content-area {
	margin: 0 0 0 28px;
	overflow: hidden;
	padding: 25px 18px 0;
	display: inline;
	width: 476px;
	float: left;
}
#content h1, #content h2 {
	font: 20px/20px "Times New Roman", Times, serif;
	text-transform: uppercase;
	margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
	background: #067d81;
	padding: 14px 30px 14px 15px;
	margin: 0 0 17px;
	overflow: hidden;
	width: 430px;
}
#content .welcome img {
	border: 1px solid #fff;
	margin: 3px 0 0;
	float: left;
}
#content .welcome .welcome-text {
	width: 315px;
	float: right;
}
#content .welcome strong {
	margin: 0 0 5px;
	display: block;
}
#content .welcome a {
	color: #e79836;
}
#content .welcome p {
	line-height: 18px;
	margin: 0;
}
/* content columns block styles */
#content .columns-holder {
	background: url(../images/bg-divider.png) repeat-y 214px 0;
	overflow: hidden;
	clear: both;
	width: 520px;
}
#content .columns-holder .column1 {
	padding: 0 20px;
	width: 179px;
	float: left;
}
#content .columns-holder .column2 {
	padding: 0 84px 0 20px;
	width: 160px;
	float: left;
}
#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}
 
#content .columns-holder p,
#content .columns-holder q {
	line-height: 17px;
	margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
	color: #adc2c2;
	font-weight: bold;
	font-style: italic;
	display: block;
	text-align: right;
	padding: 0 4px 0 0;
	margin: 0;
}
/* side column block styles */
#content .sidecolumn {
	padding: 35px 29px 20px 35px;
	width: 176px;
	float: right;
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
	list-style: none;
	padding: 0;
	margin: 0;
}
#content ul.headlines li {
	padding: 0 0 22px;
}
#content ul.headlines span.date {
	color: #14989b;
	display: block;
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: bold;
}
#content ul.headlines strong {
	display: block;
	color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
	font-weight: bold;
	font-size: 9px;
	padding: 15px 0 0;
	text-align: right;
	display: block;
}
#content ul.headlines span.read-more a {
	background: url(../images/readmore.gif) no-repeat 0 50%;
	padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
	background: url(../images/bg-footer.png) repeat-y;
	padding: 9px 0;
	overflow:hidden;
	width:100%;
}
/* copyright string styles */
#footer strong {
	padding: 0 0 0 46px;
	font-weight: normal;
	color: #819d9d;
	float: left;
}
/* footer navigation styles */
#footer ul {
	overflow: hidden;
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0 20px 0 0;;
	float: right;
}
#footer ul li {
	background: url(../images/separator1.gif) no-repeat 100% 50%;
	margin: 0 -1px 0 0;
	padding: 0 13px 0 14px;
	float: left;
}
#footer a {color:#14989b;}

Open in new window

0
 
LVL 43

Assisted Solution

by:David S.
David S. earned 100 total points
ID: 23708720
This is where specificity gets rather tricky. Try changing the "#navigation a" selector to "#navigation a, #header #navigation li li a".
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 1900 total points
ID: 23709755
Use this code :
ul#navigation li li a:hover
{
      background-color: #000066;
}

And if you want it to be stable
ul#navigation li.employers li a
{
      background-color: #000066;
}

for highlighting the Submenus under Employers Menu onmousover.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 1900 total points
ID: 23709819
Also you can highlight the selected menu by retreiving the value of element through Id in javascript.

Use this :
<tr id="C1" onclick="javascript:fnSetChecked('c1');" onmouseover="javascript:onMouseOver('C1');" onmouseout="javascript:onMouseOut('C1');">

and in script, mention this
script language="javascript">
      function fnSetChecked(category)
      {
            
            var c1 = document.getElementById("C1");
if(category=="c1")
            {
                  c1.className = "selected";
            }
            else
            {
                  c1.className = "";
            }
}
0
 

Author Comment

by:fsyed
ID: 23714275
Thanks so much for the feedback, I had a bit of en epiphany while I was working on this, and realized that when a user clicks on a submenu item, that the only options of the submenu should appear on the next screen, with the users selection highlighted.  I was able to do this by adding the values of the body id="" values of the submenu pages to the CSS:

#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#eadmin #navigation .eadmin a{
      background-color: #407273;
      background-image: url(../images/menuitem-hover.gif);
      color: white;
}

I have attached my full code below.  My problem now is that when I select the option, "Full Time Permanent Staffing" from the "Employers" section, the option, "Outplacement" at the bottom is covered up.  Is there a way for me to fix this menu on this page only to fit in the size allotted?

My other concern is that I find that in Internet Explorer, all the submenus are appearing fine, but in firefox, the submenu "Administration", and "Labour", which comes out of "Immediate Staffing", which is under "Job Seekers" doesn't come out as it should.  Any reason for this?

As I said, I have attached my code below.

Thanks again to everyone.
Sincerely;
Fayyaz
HTML for index.html
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>McNickel and Associates</title>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="home">
<div id="main">
	<div id="header">
		<strong class="logo"><a href="#">PrivateLawyer</a></strong>
		<div class="header-area">
			<ul id="navigation">
				<li class="home"><a href="#">Home</a></li>
				<li class="aboutus"><a href="aboutus.html">About us</a></li>
				<li class="employers">
					<a href="#">Employers</a>
					<ul>
						<li class="ftpstaffing"><a href="ftpstaffing.html">Full Time Permanent Staffing</a></li>
						<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
						<li class="tstaffing">
							<a href="#">Temporary Staffing</a>
							<ul>
								<li class="eadmin"><a href="eadmin.html">administration</a></li>
								<li class="elabour"><a href="elabour.html">labour</a></li>
								
							</ul>
						</li>
						<li class="testing"><a href="testing.html">Testing</a></li>
						<li class="refchecks"><a href="refchecks.html">Reference Checks</a></li>
						<li class="outplacement"><a href="outplacement.html">Outplacment</a></li>
					</ul>
				</li>
				<li class="jobseekers">
					<a href="#">Job seekers</a>
					<ul>
						<li class="ftpermanent"><a href="ftpermanent.html">Full Time Permanent</a></li>
						<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
						<li class="istaffing.html"><a href="#">Immediate Staffing</a></li>
							<ul>
								<li class="jadmin"><a href="jadmin.html">administration</a></li>
								<li class="jlabour"><a href="jlabour.html">labour</a></li>
								
							</ul>
						<li class="testing"><a href="testing.html">Testing</a></li>
					</ul>
				</li>
				<li class="testing"><a href="testing.html">Testing</a></li>
				<li class="outplacement"><a href="outplacement.html">Outplacement</a></li>
				<li class="contact"><a href="contact.html">Contact / Office Locations</a></li>
			</ul>
			<img src="images/headerarea-img2f.jpg" alt="" />
		</div>
		<div class="slogan-holder">
			<span class="slogan">Making your life at work easier</span>
		</div>
	</div>
	<div id="content">
		<div class="content-area">
			<div class="welcome">
				<img src="images/content-img1.jpg" alt="" />
				<div class="welcome-text">
					<h1>Welcome!</h1>
					
					<p>McNickel & Associates Inc. is full-service recruitment firm that finds success in placing high caliber candidates with equally high quality clientele.   We are devoted to building rewarding relationships with both our clients and candidates through a uniquely creative and process-oriented approach that delivers exceptional staffing results.</p>
				</div>
			</div>
			<div class="columns-holder">
				<div class="column1">
					<br><h2>
					    <ul><li>PROFESSIONAL</li>
					        <li>EFFICIENT</li>
					        <li>TRUSTWORTHY</li>
					   </ul>
				    </h2>
					
					<blockquote cite="#">
						
					</blockquote>
				</div>
				<div class="column2 about">
					<h2>Timesheets</h2>
					
					<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
				</div>
			</div>
		</div>
		<div class="sidecolumn">
			<h2>Success story of the month!</h2>
			<ul class="headlines">
				<li>
 
					<strong>This month's Professional of the Month award goes to John Dubois!</strong>
					<br><p>On Friday February 13th, a client called our office at 8:20am with an urgent and important need to have a labourer begin work at 9am.  Our first call was to John Dubois as he has done some excellent work for us in the past.  John was able to overcome short notice, challenging road conditions and showed up 5 minutes early .  For his dedication, professionalism and a job well done (as expected) John has been awarded a brunch for 2 at a local restaurant.   Congratulations John!</p>
					
				</li>
				
			</ul>
		</div>
	</div>
	<div id="footer">
		<strong>Copyright &copy; 2009 McNickel & Associates. All Rights Reserved.</strong>
		<ul>
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Privacy Policy</a></li>
		</ul>
	</div>
</div>
</body>
</html>
 
-----------------
HTML for ftpstaffing
-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>McNickel and Associates</title>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen"/>
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
</head>
<body id="ftpstaffing">
<div id="main">
	<div id="header">
		<strong class="logo"><a href="#">PrivateLawyer</a></strong>
		<div class="header-area">
			<ul id="navigation">
				<li class="ftpstaffing"><a href="ftpstaffing.html">Full Time Permanent Staffing</a></li>
						<li class="cstaffing"><a href="cstaffing.html">Contract Staffing</a></li>
						<li class="tstaffing">
							<a href="tstaffing.html">Temporary Staffing</a>
							<ul>
								<li class="eadmin"><a href="eadmin.html">administration</a></li>
								<li class="elabour"><a href="elabour.html">labour</a></li>
								
							</ul>
						</li>
						<li class="testing"><a href="testing.html">Testing</a></li>
						<li class="refchecks"><a href="refchecks.html">Reference Checks</a></li>
						<li class="outplacement"><a href="outplacement.html">Outplacment</a></li>
			</ul>
			<img src="images/headerarea-imgemployers.jpg" alt="" />
		</div>
		<div class="slogan-holder">
			<span class="slogan">Making your life at work easier</span>
		</div>
	</div>
	<div id="content">
		<div class="content-area">
			<div class="welcome">
				<img src="images/content-img1.jpg" alt="" />
				<div class="welcome-text">
					<h1>welcome to our web site</h1>
					<strong>Lorem ipsum dolor sit amet, contuer adipiscingelit</strong>
					<p>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta</a> <a href="#">sunt, explicabo</a> nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.</p>
				</div>
			</div>
			<div class="columns-holder">
				<div class="column1">
					<h2>Testimonials</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<blockquote cite="#">
						<q>sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto</q>
						<cite>Bob Stanley</cite>
					</blockquote>
				</div>
				<div class="column2 about">
					<h2>About Us</h2>
					<strong>Lorem ipsum dolor sit amet</strong>
					<p>Lorem ipsum dolor sit amet sed diamaccusantium doloremque laudantium, totam rem aperiam eaquep. Store veritatis et quasi architecto <a href="#">beatae vitae dicta </a></p>
				</div>
			</div>
		</div>
		<div class="sidecolumn">
			<h2>Latest News</h2>
			<ul class="headlines">
				<li>
					<span class="date">January 23th, 08</span>
					<strong>Amet, consectetuer adipis cing</strong>
					<p>elit sed diam nonummy nibh euismod tincidunt ut <a href="#">laoreet</a> dolore</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
				<li>
					<span class="date">September 12th, 08</span>
					<strong>Consectetuer adipis cing elit</strong>
					<p>sed diam  volutpat.  Ut wisi enim ad minim veniamuis nostrud exerci tation ullamc orper</p>
					<span class="read-more"><a href="#">read more</a></span>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<strong>Copyright &copy; 2008 Busness Company. All Rights Reserved.</strong>
		<ul>
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Privacy Policy</a></li>
		</ul>
	</div>
</div>
</body>
</html>
 
---------------
CSS CODE
---------------
body {
	font: 11px Tahoma, Arial, sans-serif;
	background:#265051;
	color:#fff;
	margin:0;
}
form {
	margin:0;
	padding:0;
}
img {border:none;}
q{quotes: none;}
q:before{content:"";}
q:after{content:"";}
a{
	text-decoration: underline;
	color: #e79836;
}
a:hover{text-decoration: none;}
/* main containers styles */
.holder {
	overflow: hidden;
	width: 100%;
}
#main {
	margin:0 auto;
	width:780px;
	overflow:hidden;
	position:relative;
}
/* header block styles */
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding: 93px 0 0;
	width: 100%;
	height:310px;
	overflow:hidden;
}
#header .header-area {
	background: #fff;
	overflow: hidden;
	padding: 1px 0;
	width: 100%;
	height: 253px;
	clear: both;
}
#header .header-area img {
	float: right;
}
/* logo styles */
#header strong.logo {
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
	width: 433px;
	height: 93px;
	margin: -93px 0 0 20px;
}
#header strong.logo a {
	position: relative;
	cursor: pointer;
	display: block;
	height: 100%;
}
/* slogan block styles */
#header .slogan-holder {
	background: url(../images/bg-slogan.png) repeat-x;
	overflow: hidden;
	height: 55px;
}
#header span.slogan {
	background: url(../images/slogan.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: right;
	width: 585px;
	height: 55px;
}
/* navigation menu styles */
#navigation {
	font: bold 15px/15px Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	text-transform: uppercase;
	background: #aec2c3;
	list-style: none;
	padding: 13px 0 0;
	margin: 0;
	width: 227px;
	height: 100%;
	float: left;
}
#navigation li {
	margin: 0 0 6px;
	width: 100%;
	float: left;
}
#navigation a {
	padding: 6px 0 4px 93px;
	text-decoration: none;
	color: #fff;
	background: #b5c8c9 url(../images/menuitem.gif) no-repeat 70px 10px;
	/* uncomment this line for light grey color */
	/* background: #d6e0e1 url(../images/menuitem.gif) no-repeat 70px 10px; */
	display: block;
	width: 134px;
}
#navigation a:hover,
#navigation a.active {
	background: #407273 url(../images/menuitem-hover.gif) no-repeat 70px 10px;
}
#navigation li.hover,
#navigation li:hover {
	position: relative;
}
#navigation li.hover ul, #navigation li:hover ul {display: block;}
#navigation li.hover ul ul, #navigation li:hover ul ul {display: none;}
#navigation ul {
	background: #aec2c3;
	position: absolute;
	list-style: none;
	display: none;
	padding: 6px 0 0;
	margin: 0;
	left: 217px;
	top: -6px;
	width: 270px;
}
#navigation ul a {
	background-position: 10px 10px !important;
	padding: 6px 5px 4px 30px;
	width: 235px;
}
#navigation ul ul {
	left: 260px;
	width: 190px;
}
#navigation ul ul a {width: 155px;}
#navigation ul li.hover ul, #navigation ul li:hover ul {display: block;}
 
#home #navigation .home a,
#aboutus #navigation .aboutus a,
#employers #navigation .employers a,
#jobseekers #navigation .jobseekers a,
#testing #navigation .testing a,
#outplacement #navigation .outplacement a,
#contact #navigation .contact a,
#ftpstaffing #navigation .ftpstaffing a,
#eadmin #navigation .eadmin a{
	background-color: #407273; 
	background-image: url(../images/menuitem-hover.gif);
	color: white;
}
/* content block styles */
#content {
	background: url(../images/bg-content.png) repeat-y;
	padding: 0 0 22px;
	overflow:hidden;
	width: 100%;
}
#content .content-area {
	margin: 0 0 0 28px;
	overflow: hidden;
	padding: 25px 18px 0;
	display: inline;
	width: 476px;
	float: left;
}
#content h1, #content h2 {
	font: 20px/20px "Times New Roman", Times, serif;
	text-transform: uppercase;
	margin: 0 0 14px;
}
/* welcome block styles */
#content .welcome {
	background: #067d81;
	padding: 14px 30px 14px 15px;
	margin: 0 0 17px;
	overflow: hidden;
	width: 430px;
}
#content .welcome img {
	border: 1px solid #fff;
	margin: 3px 0 0;
	float: left;
}
#content .welcome .welcome-text {
	width: 315px;
	float: right;
}
#content .welcome strong {
	margin: 0 0 5px;
	display: block;
}
#content .welcome a {
	color: #e79836;
}
#content .welcome p {
	line-height: 18px;
	margin: 0;
}
/* content columns block styles */
#content .columns-holder {
	background: url(../images/bg-divider.png) repeat-y 214px 0;
	overflow: hidden;
	clear: both;
	width: 520px;
}
#content .columns-holder .column1 {
	padding: 0 20px;
	width: 179px;
	float: left;
}
#content .columns-holder .column2 {
	padding: 0 84px 0 20px;
	width: 160px;
	float: left;
}
#content .columns-holder .column2.about {background: url(../images/bg-about.png) no-repeat;}
 
#content .columns-holder p,
#content .columns-holder q {
	line-height: 17px;
	margin: 5px 0;
}
/* quote block styles */
#content .columns-holder blockquote {margin: 0;}
#content .columns-holder cite {
	color: #adc2c2;
	font-weight: bold;
	font-style: italic;
	display: block;
	text-align: right;
	padding: 0 4px 0 0;
	margin: 0;
}
/* side column block styles */
#content .sidecolumn {
	padding: 35px 29px 20px 35px;
	width: 176px;
	float: right;
}
#content .sidecolumn h2 {margin: 0 0 20px;}
#content ul.headlines {
	list-style: none;
	padding: 0;
	margin: 0;
}
#content ul.headlines li {
	padding: 0 0 22px;
}
#content ul.headlines span.date {
	color: #14989b;
	display: block;
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: bold;
}
#content ul.headlines strong {
	display: block;
	color: #14989b;
}
#content ul.headlines p {margin: 2px 0;}
/* read more link styles */
#content ul.headlines span.read-more {
	font-weight: bold;
	font-size: 9px;
	padding: 15px 0 0;
	text-align: right;
	display: block;
}
#content ul.headlines span.read-more a {
	background: url(../images/readmore.gif) no-repeat 0 50%;
	padding: 0 0 0 10px;
}
/* footer block styles */
#footer {
	background: url(../images/bg-footer.png) repeat-y;
	padding: 9px 0;
	overflow:hidden;
	width:100%;
}
/* copyright string styles */
#footer strong {
	padding: 0 0 0 46px;
	font-weight: normal;
	color: #819d9d;
	float: left;
}
/* footer navigation styles */
#footer ul {
	overflow: hidden;
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0 20px 0 0;;
	float: right;
}
#footer ul li {
	background: url(../images/separator1.gif) no-repeat 100% 50%;
	margin: 0 -1px 0 0;
	padding: 0 13px 0 14px;
	float: left;
}
#footer a {color:#14989b;}

Open in new window

0
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 1900 total points
ID: 23718374
Replace your code with the following code and two suboptions under Immediate Staffing under Job Seekers wil work in firefox as well.

<li class="istaffing"><a href="#">Immediate Staffing</a>
                                          <ul>
                                                <li class="jadmin"><a href="jadmin.html">administration</a></li>
                                                <li class="jlabour"><a href="jlabour.html">labour</a></li>
                                                </li>
                                          </ul>
0
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 1900 total points
ID: 23718384
Also can you please tell for your which browser, resolution you are facing the problem as I have checked it on IE7 and Firefox at 1024*768 resolution ?
0
 

Author Closing Comment

by:fsyed
ID: 31549952
My apologies for the delay.  Thanks so much for your time, patience, and help.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question