Anyone want to make me a simple barebones menu?

[DJMK4]

Is anyone willing to make me a simple barebones horizontal dropdown menu to go into a navigation div. I got a background image here waiting and all i need someone to do is quickly code me up the menu style and drop down script.

Needs to have cross browser support! I am willing to pay a small fee for this or return a favour.

Would be helping me a lot!!

Thanks

 

[DJMK4]

Cool, thats what i used in the first place but the original suckerfish menu's had too many compatability issues..

Im gonna try this one..

Ta

 

[DJMK4]

ok done, can somebody test this for me...

www.caldicot-pc-helpdesk.co.uk/menu/index.htm

on cross browsers

also i cant seem to get the a:hover function to work so the colour of the links change on rollover..

and another little niggle is the borders, no matter what combination i seem to use i cant seem to get them to be 1px single border all the way through the menu (i.e. the top and the bottom always combine to give 2px borders) ..

here is the css

/* CSS Document */

body {
background-image:url(Images/background.jpg);
}


div#container {
position: absolute;
background-color:#ffffff;
margin-left: 50px;
margin-top: 50px;
width: 901px;
height: 500px;
}

* html div#container { position: absolute; margin-top: 15px; }

div#banner {
position: absolute;
background-image: url(Images/banner.jpg);
height: 85px;
width: 895px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid black
}

div#navigation {
position: absolute;
background-image: url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 90px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}

div#maincontent {
height: 360px;
width: 895px;
position: absolute;
background-color: #666666;
margin-top: 113px;
margin-left: 2px;
border: 1px solid black;
clear: left;
}

* html div#maincontent{

height: 360px;
width: 895px;
position: absolute;
background-color: #666666;
margin-top: 114px;
margin-left: 2px;
border: 1px solid black;
clear: left;
}






div#footer {
position: absolute;
background-image: url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 477px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}

//*///////////////////////MENU////////////////////////////////////////////////////////////////////////*//


body {
	font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	
	
}

#nav a {
	display: block;
	width: 10em;
	height:19px;
	text-decoration: none;
	
	
	color: #FFFFFF;
	text-align: center;
	
	
}






#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
	border: 1px solid black;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background-image: url(Images/menu.jpg);
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	
	text-decoration: none;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	
}




a:hover {
color:#FF0000;
}

 

[DJMK4]

is this ok??

www.caldicot-pc-helpdesk.co.uk/menu/index.htm

if there is anyway to get rid of that double border on the right that would be great..when the menu expands, the submenu items are 1px to the right of the main menu items in IE..Why is this??

/* CSS Document */

body {
background-image:url(Images/background.jpg);
}


div#container {
position: absolute;
background-color:#ffffff;
margin-left: 50px;
margin-top: 50px;
width: 901px;
height: 500px;
}

* html div#container { position: absolute; margin-top: 15px; }

div#banner {
position: absolute;
background-image: url(Images/banner.jpg);
height: 85px;
width: 895px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid black
}

div#navigation {
position: absolute;
background-image: url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 90px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}

div#maincontent {
height: 360px;
width: 895px;
position: absolute;
background-color: #666666;
margin-top: 113px;
margin-left: 2px;
border: 1px solid black;
clear: left;
}

* html div#maincontent{

height: 360px;
width: 895px;
position: absolute;
background-color: #666666;
margin-top: 114px;
margin-left: 2px;
border: 1px solid black;
clear: left;
}






div#footer {
position: absolute;
background-image: url(Images/menu.jpg);
margin-left: 2px;
margin-right: 2px;
margin-top: 477px;
width: 895px;
height: 20px;
border:1px solid black;
z-index: 2;
}




#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #000;
border-bottom: 0;

}

#nav a {
display: block;
width: 10em;
height:19px;
text-decoration: none;
color: #FFFFFF;
text-align: center;
border-right: 1px solid #000;
}

#nav a:hover {
color:#FF0000;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
border-bottom: 1px solid #000;
height:19px;
}

#nav li ul { /* second-level lists */
position: absolute;
background-image: url(Images/menu.jpg);
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}