Links Menu not working as it should

[herghost]

Hi all,

 

I have the below css:

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper { 
margin: 0 auto;
width: 922px;
}
#header {
color: fff;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: ffffff;
border:thin #000 1px;
}

.logo {
float:left;
}

.searchwrapper {
width:310px; 
height:40px;
background-image:url(../images/searchbox.jpg);
background-repeat:no-repeat;
padding:0px;
margin-top:65px;
position:relative;
float:right;


}

#searchwrapper form { display:inline ; }

.searchbox {
border:0px; 
background-color:transparent;
position:absolute;
top:7px;
left:5px;
width:256px;
height:28px;
color:#fff;
}

.searchbox_submit {
border:0px; 
background-color:transparent;
position:absolute; 
top:5px;
left:261px;
width:50px;
height:32px;
color:#fff;
}

.accountlinks {
float: right;
margin-right: -280px;


}

#leftcolumn { 
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content { 
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn { 
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer { 
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}




/*Menu*/

#linksbar {

width: 922px;
float: left;

}
.bg {background: url(../images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(../images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(../images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(../images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(../images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(../images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(../images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(../images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(../images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(../images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(../images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(../images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

 

and html:

<!-- Begin Wrapper -->
<link href="styles/main.css" rel="stylesheet" type="text/css">


<div id="wrapper">

<div id="header">
<div class="logo">
    <a href="index.php"><img src="images/logo.png" /></a>
    </div>

      	<div class="searchwrapper">
        <form action="">
	<input type="text" class="searchbox" name="s" value="" />
	<input type="image" src="images/search.gif" class="searchbox_submit" value="" />
	</form>
	</div>
        	<div class="accountlinks">
        	<a href="login.php">Login</a>
            <a href="login.php">Login</a>
            <a href="login.php">Login</a>
            <a href="login.php">Login</a>
       		</div>
</div>

<div id="linksbar">

<div> 
<ul class="menu"> 
<li class="top"><a href="a" target="_self" class="top_link"><span>Electronics</span></a> 
<ul class="sub"> 
<li><a href="1" target="_self">Sub</a></li> 
</ul> 
</li> 
<li class="top"><a href="b" target="_self" class="top_link"><span>Next</span></a> 
</li> 
</ul> 
</div> 

</div>



      
			<div id="leftcolumn">
            </div> 
            	<div id="content">
                </div>
				<div id="rightcolumn">
                    </div>
						<div id="footer">
                        </div>
</div>

   
   

 

 

The problem I am having is that when the mouse is over the electronics heading in the menu bar, the sub headings are meant to pop up underneath it, however nothing pops up at all.

 

What have I missed?

 

Many Thanks