Selector Problems

Get Started
1

Thank you all for stopping by.

What I am looking at is that my main nav, id=navTab, is behaving oddly. I am fairly new coding navigation. What it is doing right now is that any mousing over the “entire” nav container is triggering the selection of both anchors on the individual lists. I am confused and don’t know why it’s doing this. Can any body show by example the right way to code this and perhaps give indication on how to make the chosen tab active?

Heres my page: http://www.newmanexpressions.com/sandbox/Billy/Main%20Site/index.html

Heres the HTML


<!DOCTYPE html>
<html lang="en">
<head>

<title>New Man Expressions</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css-main/stylesheet.css">

<body>

<div id="container">

	<div id="header">
		<h1><a href="index.html" title="New Man Expressions">New Man Expressions<span>&nbsp;
		</span></a>
		</h1>
	<!-- "header" --></div>
	<div id="pageWrapper">
	
		<div id="navArea">
			<div id="topNav">
			
				<ul>
					<li><a class="vision" href="#"><span>Vision</span></a></li>
					<li><a class="stream" href="#"><span>Downloads</span></a></li>
					<li><a class="social" href="#"><span>Socialize</span></a></li>
					<li><a class="partner" href="#"><span>Partnership</span></a></li>
					<li><a class="tools" href="#"><span>Tools</span></a></li>
					<li><a class="mail" href="#"><span>E Mail Us</span></a></li>
				</ul>
			
			<!-- "topNav" --></div>
	
			
				<ul id="navTab">
					<li><a href="#"><span>MEDIA</span></a></li>
					<li><a href="#"><span>ARCHIVES</span></a></li>
				</ul>
			
		
		<!-- "navArea" --></div>
		
		<div id="page">
		<!-- "page" --></div>
		
	<!-- "pageWrapper"--></div>
	<div id="footer"></div>




<!-- "container" --></div>
</body>
</html>

Heres the CSS

* { margin:0; padding:0;}


body {background: #000;
	font:normal 85%/120% arial, verdana, helvetica, sans-serif;
	color:#333;
}

#container {width:995px;}

#header {background:url(header.png) no-repeat;
	height:74px;
	width:995px;
	position:relative;
}

h1 {font-size:150%;
	padding-top:20px;
}

h1 a {text-decoration:none;
	cursor:pointer;
	color:#ccc;
}

h1 span {display:block;
	background:url(header.png) no-repeat;
	width:995px;
	height:74px;
	position:absolute; top:0; left:0;
}


#pageWrapper{background:url(pageBG.gif) repeat-y 0 0;

}


#navArea{background:url(navBar.gif) repeat-x right bottom;
    width:969px;
	height:107px;
	margin-left:12px;
}


#topNav {width:328px;
	height:38px;
	list-style:none;
	margin-left:650px;
	background:transparent;
	padding-top: 9px;
}
#topNav  li {display:inline;
	float:left;
}

#topNav  a {background:url(navIcons.gif) no-repeat 0 0;
	display:block;
	width:48px;
	height:38px;
	vertical-align:middle;
	text-decoration:none;
	color:#333;
}

#topNav  a.vision {background-position:0 0;}


#topNav  a.stream {background-position: -40px 0;}


#topNav  a.social {background-position:-82px 0;}


#topNav  a.partner {background-position:-125px 0;}

#topNav  a.tools{background-position:-173px 0;}

#topNav  a.mail {background-position:-221px 0;}





/* DISPLAY TEXT TO Left OF ICONS */
#topNav a span {display: none;}
#topNav a:hover span {display: block;
	position: absolute;
	top:95px;
	right:800px;
	z-index:100;
	font-weight:bold;
}


#navTab{
	width:700px;
    height:59px;
    line-height:normal;
	padding:1px 0 0 21px;
}


#navTab li {display:inline;}

#navTab li a {
    float:left;
    text-decoration:none;
}

#navTab li a span {
    float:left;
    display:block;
    width:148px;
    background:url(navTab.gif) no-repeat left top;
	padding:15px 0px 17px 0px;
    text-align: center;
    font-size:125%;
	font-weight:bold;
    color:#FFF;}

#navTab:hover li a span {background-position:0 -59px;}




#page{width:967px;
	height:777px;
	margin-left:12px;
	}
	
#footer {background:url(footer.gif)no-repeat top left;
	width: 995px;
	height:50px;
}
2

It is because you are telling it to give it the background on


#navTab:hover li a span {background-position:0 -59px;}

make it


#navTab li a:hover span {background-position:0 -59px;}

and it should work after you add the image

3

That makes all the difference. Thank you for your help.