I have modified your code. Hope it works for you :
Head Section :
<link href="aStyle.css" type="text/css" rel="stylesheet" />
<script src="JScript/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("nav ul li").hover(function () {
if ($("> ul", this).length > 0) {
$("> ul", this).show();
}
}, function () {
if ($("> ul", this).length > 0) {
$("> ul", this).hide();
}
});
});
</script>
Body Section :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dashboard</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Company</a></li>
<li><a href="#">About Us</a><ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
And finally your css :
@charset "utf-8";
body {
background-color: #CCC;
margin: 0 auto;
clear: both;
width: 70%;
}
a {
text-decoration: none;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
float: left;
width: 120px;
list-style: none;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #FF0000;
}
.nav ul li a {
color: #CCCCCC;
text-decoration: none;
}
li ul {
background-color: #ff0000;
margin-bottom: 2px;
display: none;
}
.nav ul li li:hover {
background-color: #09F;
}
Good luck.