CSS Based Dropdown Hover Area Problem

[newdude]

i have a dropdown that appears beneath the "Designs" heading in my "hor_nav" bar that runs horizontally across the top of the page. the dropdown has a lot of content and is fairly large, about 3" x 5".

i only want the dropdown to appear when someone hovers over the "Designs" heading in the hor_nav bar. But right now if someone hovers over anywhere in the area underneath the nav bar that is taken up by the dropdown, the dropdown appears. how do i fix?

thanks!

HTML

<!-- begin #hor_nav -->
 <div id="hor_nav">
<ul>
<li><a href="">Home</a></li> 
 <li><a href="">DESIGNS ▼</a> 
  <ul> 
   <li><a href="/products.php?cat=29">Prod 1</a></li>
   <li><a href="/products.php?cat=23">Prod 2</a></li>
   <li><a href="/products.php?cat=21">Prod 3</a></li>
   <li><a href="/products.php?cat=10">Prod 4</a></li>
   <li><a href="/products.php?cat=13">Prod 5</a></li>
   <li><a href="/products.php?cat=15">Prod 6</a></li>
   <li><a href="/products.php?cat=14">Prod 7</a></li>
   <li><a href="/products.php?cat=12">Prod 8</a></li>
  </ul> 
 </li> 
 <li><a href="">All Mens Shirts</a></li>
 <li><a href="">All Womens Shirts</a></li> 
<li><a href="">All Youth/Babies</a></li>
<li><a href="">All Accessories</a></li>
 <li class="last"><a href="">All Clearance</a></li> 
</ul>
</div>
<!-- end #hor_nav -->

CSS

}
#hor_nav {
text-align: left;
padding: 0;
margin: 0;
list-style: none;
background-color: #FFFF99;
width: 900px;
height: 35px;
border-right: 1px solid #996600;
border-bottom: 1px solid #996600;
border-left: 1px solid #996600;
}
#hor_nav ul {
text-align: left;
padding: 0;
margin: 0;
list-style: none;
background-color: #FFFF99;
width: 895px;
line-height: 20px;
height: 30px;
font-size: 15px;
font-weight: bold;
padding: 5px 0px 0px 3px;
}
#hor_nav ul li {
position: relative;
float: left;
padding: 0px 8px;
margin: 0;
display: block;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #009900;
}
#hor_nav ul li.last {
position: relative;
float: left;
padding: 0px 7px;
margin: 0;
display: block;
border-right-style: none;
}
#hor_nav ul li ul {
background-color: #FFFFFF;
width: 310px;
border: 1px solid #009900;
}
#hor_nav ul li ul li{
color: #00FFFF;
font-size: 13px;
clear:left;
border: none;
}
#hor_nav li ul {
height: auto;
left: auto;
opacity: 0;
position: absolute;
top: 29px;
width: auto;
}
#hor_nav li a {
text-decoration: underline;
color: #009900;
 -webkit-transition-property: background-color, color, text-shadow;
 -webkit-transition-duration: .5s;
 -webkit-transition-timing-function: ease-in;
}
#hor_nav ul li a:hover {
color: #00FF00;
text-decoration: none;
}
#hor_nav li:hover ul { 
opacity: 1;
-webkit-transition: opacity 4s linear; 
}

[newdude]

anyone? thanks!