Change background colour on list item

HTML & CSS
1

Hello

I want my list item in my navigation bar at the top to change the background colour when hovering over it.

So it looks like this when hovering over the item

Here is my HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


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

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


<title></title>

</head>


<body>

	<div id="content">

		<div id="top">

			<ul id="tabs">
				<li>Articles</li>
				<li>Contact</li>
				<li>Privacy</li>
				<li>Terms</li>
			</ul>

		</div>

		<div id="header"></div>
		<div id="nav"></div>
		<div id="gallery"></div>
		<div id="promo"></div>
		<div id="latest"></div>
		
		<div id="other"></div>
		<div id="bottom"></div>

	</div>	


</body>



</html>

And here is my CSS

body{
	font-family:arial;

}

#content{
	width:980px;
	height:auto;
	margin:0 auto;


}

#top{
	width:980px;
	height:30px;
	background-color:#2d2d2d;
	padding-top:14px;
}

#tabs{
	
	display:inline;
	color:#999999;
	font-size:12px;
	display: block;

	
}

#top li{
	display:inline;
	padding-left:25px;
	
}




#header{
	width:980px;
	height:100px;
	background-color:green;
}

#nav{
	width:980px;
	height:48px;
	background-color:blue;
}

#gallery{
	width:670px;
	height:315px;
	background-color:orange;
	margin-top:16px;
	float:left;
}

#latest{
	width:670px;
	height:580px;
	background-color:red;
	margin-top:16px;
	float:left;


}

#promo{
	width:296px;
	height:632px;
	background-color:yellow;
	margin-top:16px;
	float:right;

}

#other{
	width:980px;
	height:236px;
	background-color:brown;
	clear:both;
	margin-top:16px;
	float:left;
	

}

#bottom{
	width:980px;
	height:114px;
	background-color:#2d2d2d;
	margin-top:16px;
	float:left;

	
}

So how would I go about doing this?

Thanks

2

You could do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style>

body{
	font-family:arial;

}

#content{
	width:980px;
	height:auto;
	margin:0 auto;


}

#top{
	width:980px;
	background-color:#2d2d2d;
}

#tabs{
	list-style: none;
	color:#999999;
	font-size:12px;
	width: 100%;
	overflow: hidden;
	padding-left: 25px;
}

#top li{
	float: left;
}

#top li a {
	display: block; 
	line-height: 44px;
	color: #999999;
	text-decoration: none;
	padding: 0 14px;
}

#top li a:hover {background: #999; color: black;}

#header{
	width:980px;
	height:100px;
	background-color:green;
}

#nav{
	width:980px;
	height:48px;
	background-color:blue;
}

#gallery{
	width:670px;
	height:315px;
	background-color:orange;
	margin-top:16px;
	float:left;
}

#latest{
	width:670px;
	height:580px;
	background-color:red;
	margin-top:16px;
	float:left;


}

#promo{
	width:296px;
	height:632px;
	background-color:yellow;
	margin-top:16px;
	float:right;

}

#other{
	width:980px;
	height:236px;
	background-color:brown;
	clear:both;
	margin-top:16px;
	float:left;
	

}

#bottom{
	width:980px;
	height:114px;
	background-color:#2d2d2d;
	margin-top:16px;
	float:left;

	
}
</style>


<title></title>

</head>


<body>

	<div id="content">

		<div id="top">

			<ul id="tabs">
				<li><a href="#">Articles</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
			</ul>

		</div>

		<div id="header"></div>
		<div id="nav"></div>
		<div id="gallery"></div>
		<div id="promo"></div>
		<div id="latest"></div>
		
		<div id="other"></div>
		<div id="bottom"></div>

	</div>	


</body>

</html>

I’ve just put the CSS in the head for ease of posting, but you can move it back to your external file.