CSS - Css/javascript - Javascript Hover Not Working Correctly.

.sb-blocks li em {
	background: url(images/hover.png) no-repeat center top;
	width: 350px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: -100px;
	padding: 5px 0 0;
	font-style: normal;
	z-index: 2;
	display: none;
}

p.url {
	font-weight: bold;
	color: #a82125;
	text-align: center;
	font-size: 1em;
	line-height: .5em;
}

.sb-blocks em img {
	float: left;
	padding: 5px 5px 15px 15px;
}


.sb-blocks p.description {
	color: #a82125;
	float: left;
	width: 275px;
}

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }


HTML code:

<div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red

function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;

if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
}

<div id="nav">
        <ul>
          <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
          <li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></li>
          <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
          <li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li>
          <ul id="break"><li id="first">
            <li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li>
            
            <li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li>
            <ul>
              <li><a href="#">Search Engine Marketing</a></li>
              <li><a href="#">Pay Per Click Management</a></li>
              <li><a href="#">Lovcal Search Marketing</a></li>
              <li><a href="#">Contextual Marketing</a></li>
              <li><a href="#">Shopping Comparison</a></li>
              <li><a href="#">Paid Inclusion</a></li>
              <li><a href="#">Search Engine Optimizaiton</a></li>
            </ul>
            </li>
          </ul>
        </ul>
      </div>
[\code]

JavaScript Code:
[code]
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("break");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	float:right;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #7d6340;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

#break a {
	font-weight: bold;
	color: green;
}

#break a {
	text-decoration: none;
}

#break li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#break li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #7d6340;
	border-width: 0 5px;
}

#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
	background-image:url(images/agency2.gif);
	border:0px;
	width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
	background-image: url(images/agencyup2.gif);
	border: 0px;
	width: 54px;
	
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
	background-image: url(images/services2.gif);
	border:0px;
	width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
	background-image: url(images/expandedservice2.gif);
	border: 0px;
	width: 56px;
}

#nav ul li a#nav_technology,
#nav ul li a:visited#nav_technology{
	background-image: url(images/technology2.gif);
	border:0px;
	width: 76px;
}
#nav ul li a:hover#nav_technology,
#nav ul li a#nav_technology.active,
#nav ul li a:visited#nav_technology.active {
	background-image: url(images/technology2up.gif);
	border: 0px;
	width: 76px;
}
#nav ul li a#nav_distribution,
#nav ul li a:visited#nav_distribution {
	background-image:url(images/distribution2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_distribution,
#nav ul li a#nav_distribution.active,
#nav ul li a:visited#nav_distribution.active {
	background-image: url(images/distributionup2.gif);
	border: 0px;
	width: 72px;
}

#nav ul li a#nav_casestudies,
#nav ul li a:visited#nav_casestudies {
	background-image: url(images/casestudies2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_casestudies,
#nav ul li a#nav_casestudies.active,
#nav ul li a:visited#nav_casestudies.active {
	background-image: url(images/casestudiesup2.gif);
	border: 0px;
	width: 72px;
}
#nav ul li a#nav_blog,
#nav ul li a:visited#nav_blog {
	background-image: url(images/blog2.gif);
	border:0px solid black;
	width: 27px;
}
#nav ul li a:hover#nav_blog,
#nav ul li a#nav_blog.active,
#nav ul li a:visited#nav_blog.active {
	background-image: url(images/blogup2.gif);
	border: 0px;
	width: 27px;
}