Drop DOwn Probems in Opera

[birdy247]

Hi

This drop down menu works fine in IE6/7 FF2/3 Safari and Opera 9.5 beta. However in Opera 9 the scroll doesnt work and the content simply flows out of the bottom.

CSS-----------
#nav { /* all lists */
padding-top: 4px;
padding-left:20px;
margin: 0;
list-style: none;
line-height: 1;
float:left;
font-size:1px;
}

/*this sets the width for the dorp down menu*/
#nav li {
/* all list items */
float: left;
width: 170px; /* width needed or else Opera goes nuts */
}

/*this sets the width of the titles which trigger the drop down*/
#nav li.top {
/* all list items */
float: left;
width: 100px; /* width needed or else Opera goes nuts, this stes the width of the drop downs */
}

/*This is the link wihich open the dropdown */
#nav a.top_level{
font-size:12px;
border:0;
background:transparent;
color:#000000;
}

/*This is the link wihich open the dropdown */
#nav a.top_level:hover{
background:transparent;
border:0;
text-decoration:none;
color:#000000;
}

#nav li ul { /* second-level lists */
position: absolute;
/*This changes the background of the dropdown */
height:400px;
/*This makes the drop-down scroll vertically and hides the horizontal scroll bar */
overflow-y:scroll;
overflow-x: hidden;
overflow: -moz-scrollbars-vertical;
width: 180px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
/*This changes the colour of the border around the actual dropdown menu */
border:1px solid #000000;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
background: #006633;
/*This sets the height of the drop-down menu */
}

#content {
clear: left;
color: #ccc;
}




#nav a {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
/*Color of the link text in the drop-down*/
color: #FFFFFF;
border-bottom:1px solid #000000;
/*padding around the individual items in the drop down
Must Be changed in a:hover as well*/
padding-top:1px;
padding-bottom:1px;
}


#nav a:hover{
width:100%;
background: #FFCC00;
text-decoration:none;
border-bottom:1px solid #000000;
color:#000000;
padding-top:1px;
padding-bottom:1px;
}


HTML------------
<ul id="nav">

<li class = "top">
<a class = "top_level" href="#">Brands <img class = "search_bar" src="images/container/top_search_bar/bullet.gif" width="14" height="11" /></a>

<ul>

<li><a href="#">xxxxxxxxxxx</a></li>
<li><a href="#">xxxxxxxxxx</a></li>
blah
blah
blah

</ul>
</li>
</ul>