Thanks for all your support everyone,
I think I have reached my limit with the last hurdle. All I need to do is change the style sheet so the drop down box will appear underneath the button image.
Bellow is the style sheet for the dropdown.
Code:
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
background: #78C9F9;
width: 200px;
}
.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
background: none;
}
.anylinkmenu a:hover{ /*hover background color*/
background: #16191B;
color: #FFFFFF;
}
.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
background: #E9E9E9;
}
.anylinkmenucols li{
padding-bottom: 3px;
}
.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}
.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
I have attached 2 images, one showing how I would like it and the other is showing up half way down the image.
It's strange because Internet Explorer is showing it perfectly where as Firefox is displaying the drop down on the image.
Thanks for any help on this last issue I have.
EDIT: Looks like I can only upload 1 attachment so I have uploaded a screenshot from Firefox which shows how I would not like it to show up.