Hi there,

I have just installed a drop down menu but I cant get the sub categories to work correctly. Could someone take a look and advise me what I am missing.

It's a wordpress site www.antiquesilveronline.co.uk (under construction obv)

The CSS is:-

Code:
/*** Menu *****************************/
#menu{height:40px; margin-top:20px;}
#navigation{height:40px;}	
#nav ul,
#nav li,
#nav span,
#nav a {
  margin: 0;
  padding: 0;
  position: relative;
}
#nav {
  height: 40px;
  width:100%;
}
#nav:after,
#nav ul:after {
  content: '';
  display: block;
  clear: both;
}
#nav a {
  background: #ccc;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #fff 0%, #d7d7d7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #d7d7d7));
  background: -webkit-linear-gradient(top, #fff 0%, #d7d7d7 100%);
  background: -o-linear-gradient(top, #fff 0%, #d7d7d7 100%);
  background: -ms-linear-gradient(top, #fff 0%, #d7d7d7 100%);
  background: linear-gradient(to bottom, #fff 0%, #d7d7d7 100%);
  color: #555555;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 40px;
  padding: 0 20px;
  text-decoration: none;
}
#nav ul {
  list-style: none;
}
#nav > ul {
  float: left;
}
#nav > ul > li {
  float: left;
}
#nav > ul > li:hover:after {

}
#nav > ul > li:first-child > a {
}
#nav > ul > li:last-child > a {
}
#nav > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#nav > ul > li:hover > a {
  background: #85ad74;
  color:#FFF;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #b1cfa5 0%, #85ad74 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1cfa5), color-stop(100%, #85ad74));
  background: -webkit-linear-gradient(top, #b1cfa5 0%, #85ad74 100%);
  background: -o-linear-gradient(top, #b1cfa5 0%, #85ad74 100%);
  background: -ms-linear-gradient(top, #b1cfa5 0%, #85ad74 100%);
  background: linear-gradient(to bottom, #b1cfa5 0%, #85ad74 100%);
}
#nav .has-sub {
  z-index: 1;
}
#nav .has-sub:hover > ul {
  display: block;
}
#nav .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#nav .has-sub ul li {
  *margin-bottom: -1px;
}
#nav .has-sub ul li a {
  background: #85ad74;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#nav .has-sub ul li:hover a {
  background: #85ad74;
}
#nav .has-sub .has-sub:hover > ul {
  display: block;
}
#nav .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#nav .has-sub .has-sub ul li a {
  background: #85ad74;
  border-bottom: 1px dotted #6db2d0;
}
#nav .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
Thanks in advance