Anyone want to make me a simple barebones menu?

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
22,552
Location
S.Wales
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
 
Last edited:
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
 
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

Code: 
/* 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;
}
 
The problem with the a:hover is that rule is being overriden by another rule with higher priority (specifity), so narrow down the rule and give it higher specifity:

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

For the border issue, you'll need to modify your CSS rules to apply only a bottom or top border to the <li> elements, and then add a border to the containing <ul>; something like:

Code: 
#nav ul {
border: 1px solid #000;
border-bottom: 0;}

#nav li { 
border-bottom: 1px solid #000;}
 
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??

Code: 
/* 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;
}
 
You must log in or register to reply here.
Back
Top Bottom