am trying to create a popup on mouseover on the nav bar items. Have tried the easy stuff recommended to me last week, but to no avail. I'm in over my head. please help.
my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="pmstyles.css" rel="stylesheet" type="text/css">
<link href="pmstyles2.css" rel="stylesheet" type="text/css">
<div id="header"><p><img src="logo2b.jpg" width="610" height="49"></p>
<div id="nav">
<li><a href="/" title="Home">HOME</a></li>
<li> | <a href="businessplanning.htm" title="BUSINESS PLANNING">BUSINESS PLANNING<span>This paragraph is supposed to pop up below the nav bar. But the dang thing won't cooperate and I'm about ready to check into the hospital for mental collapse.</span></a></li>
<li><a href="businessplanning.htm"> |</a> <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES</a></li>
<li> | <a href="/negotiation/" title="NEGOTIATION SERVICES">NEGOTIATION SERVICES</a></li>
<li> | <a href="/project/" title="PROJECT MANAGEMENT">PROJECT MANAGEMENT</a></li>
<li> | <a href="/pos/" title="POS SYSTEMS">POS SYSTEMS</a></li>
<div id="content">
<p>Blah, blah, blah. </p>

My css code:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
body {
background-color: #003366;
div#nav {
div#nav ul {
list-style-type: none;
div#nav ul li {
display: inline;
nav ul li a {
background-color: #CCFFFF;
text-decoration: none;
a:link {
color: #66FFFF;
text-decoration: underline;
a:visited {
text-decoration: underline;
color: #FFCC66;
a:hover {
text-decoration: none;
color: #CCCCCC;
a:active {
text-decoration: underline;

#header p {margin:0;padding:0;}
div#content {
width: 200px;
color: #33FFFF;
padding: 10;
margin-top: 25px;
margin-left: 5px;
float: left;
div#nav ul li a span {
display: none;
div#nav ul li a:hover span {
display: block;
margin: 1px;
padding: 1px;
position: absolute;
left: 150px;
top: 150px;