CSS Drop Down Menu Problem

Hi,

I have this drop down menu on

http://imafish.co.uk/pwhite/test/test.html

It works fine in Firefox and Safari but not in Internet Explorer, i've been trying for hours to get it to work - any ideas?

<ul class="primarylinks">

    <li><div class="verticalline"><a href="#1">Home<span class="content"><span class="wrap">content 1</span></span></a></div></li>
    <li><div class="verticalline"><a href="#2">About<span class="content"><span class="wrap">content 2</span></span></a></div></li>
    <li><div class="verticalline"><a href="#3">Services<span class="content"><span class="wrap">content 3</span></span></a></div></li>
    <li><div class="verticalline"><a href="#4">Planning<span class="content"><span class="wrap">content 4</span></span></a></div></li>
    <li><div class="verticalline2"><a href="#5">Contact<span class="content"><span class="wrap">content 5</span></span></a></div></li>

  </ul>

Code (markup):

body {
  margin: 0;
  padding: 0;
  font: 12px/170% Verdana;
  color:#FFFFFF;
  background:#000000;
}

/* CSS Document */

.primarylinks{
	text-align:center;
	margin: .5em 0 0 0;
	padding: 0em;
	font: 1.6em Times;
}

.primarylinks li {
  float: left;
  width: 10em;
  background-image:none;
  color:#FFFFFF;
  margin:0em 0em .5em 0em;
  padding:0em;
  border-bottom: 2px solid #ccc;
}

.primarylinks li a {
  color:#FFFFFF;
}
.verticalline{
	border-right:1px solid #007C9D;
	margin-bottom: .5em;
}

.verticalline2{
	margin-bottom: .5em;
}

.primarylinks a .content {
  display: none;
  color:#FFFFFF;
}
.primarylinks a:hover {
  position: static;
  text-decoration:underline;
}
.primarylinks :hover .content {
  display: block;
  position: absolute;
  width: 10em;
  z-index: 500;
}
.wrap {
  height: 300px;
  display: block;
  background-color:#666666;
}

Code (markup):

 

IE 5 and 6 don't understand :hover on anything other than links. There are two ways around this. One is to use the Suckerfish script found at http://www.htmldog.com/articles/suckerfish/dropdowns/ and the other is to use a .htc file (which can be found at http://www.xs4all.nl/~peterned/csshover.html - this is the method I recommend).

Oh, and you don't need all those DIVs, SPANs and classes.

 

Try looking for css dropdown on google. I thought I had seen a solution that does not force you to include any other files, just the css.

 

The alternatives I offered him are the best he's going to get.