Deperate now, Willing to PAY! Please help me - CSS Drop downs

scotchegg78 · April 21, 2008

Guys

I am getting desperate now and more than willing to pay someone to finish this damn menu off for me and get it working.

You can view the 3 sample menus here

http://www.sonsofsparta.com/cssdrop/cssdrop.html

It works well be it a white flash stutter in IE7, but ...

I need the IE 6 hover issue fixing to work with Ie6, and some weird allignments in Firefox.

If anyone can take this code and fix it to work I am willing to pay them for their time now as this is ruinning my life.

the code in full...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='cssdrop.css' rel='stylesheet' type='text/css' />
<title>CSS Drop</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>


<ul id='nav'>
<li class='gold'>Menu Gold
<ul>
	<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
	<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
	<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
	<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
</ul>
</li>
<li class='green'>Menu Green
<ul>
	<li class=''><a href='Sub Menu 1'>Sub Menu 1</a></li>
	<li class=''><a href='Sub Menu 2'>Sub Menu 2</a></li>
	<li class=''><a href='Sub Menu 3'>Sub Menu 3</a></li>
	<li class=''><a href='Sub Menu 4'>Sub Menu 4</a></li>
</ul>
<li class='pink'><a class='pink' href=''>Menu Pink</a></li>
</ul></div>
<div id="clearleft">

</body>
</html>

CSS

#nav{
list-style:none;}

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

}

#nav a {
display: block;

text-decoration:none;
color:#FFFFFF;

}

#nav li { /* all top list items */
float: left;
width: 160px; /* width needed or else Opera goes nuts */
	text-align:center;
	font-size:13px;
font-weight:bold;
color:#FFFFFF;
		height:36px;
}

#nav li:hover{
	height:123px;


}


#nav li ul { /* second-level lists */
position: relative;

width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
text-align:left;
	top:91px; /* set to start after image */


}

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

}

#nav ul li{
font-size:11px;
font-weight:normal;
text-align:left;
padding-left:5px;
height:18px;

padding-bottom:10px;

}

#nav ul li:hover{
height:18px; /* required to prevent 2nd level li set to 123 */

}

#nav ul li a:hover{
background:#ffffff;
opacity: .4;
filter: alpha(opacity=40);
color:#000000;
width:100%;
margin-left:-5px; /* moves hover block left and then re pads the text */
padding-left:5px;

}
#clearleft {
clear: left;
color: #ccc;
}


/*menu 1 Gold */

#nav li.gold {
width: 170px; /* width needed or else Opera goes nuts */

}
#nav a.gold {
width: 165px; /* width needed or else Opera goes nuts */

}
#nav .gold li{
width:160px; /* 5 less for padding in nav ul li * only overided in gold class as its wider*/

}

.gold{
width:170px;
background:url(images/menu/menubarLeft.jpg) no-repeat left top;

}
.gold:hover, .gold.sfhover{
width:170px;
background-image:url(images/menu/menubar1.gif);

}


#nav li:hover.gold ul{
background-image:url(images/menu/menu1btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:108px;
padding-top:0px;
padding-bottom:7px;
width:165px;

}


.gold li{
background-color:#DDAF01;
Background-image:url(images/menu/menu1li.gif);
background-repeat:no-repeat; 
background-position:bottom ;
}

/*menu 3 green*/
#nav li.green {
width: 160px; /* width needed or else Opera goes nuts */

}
#nav a.green {
width: 155px; /* width needed or else Opera goes nuts */

}
#nav .green li{
width:150px; /* 5 less for padding in nav ul li * only overided in gold class as its wider*/

}
.green{
width:160px;
background:url(images/menu/menubarCentre.jpg) no-repeat left top;

}
.green:hover, .green.sfhover{
width:160px;
background-image:url(images/menu/menubar3.gif);
}


#nav li:hover.green ul{
background-image:url(images/menu/menu3btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:108px;
padding-top:0px;
padding-bottom:7px;
width:155px;

}


.green li{
	background-color:#48af53;
Background-image:url(images/menu/menu3li.gif);
background-repeat:no-repeat; 
background-position:bottom ;
width:155px;
}

/*menu 6/ pink */
.pink{

width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/menu/menubarRight.jpg) no-repeat right left;
z-index:2;
display:block;

}
.pink:hover{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/menu/menubar6.jpg);
background-position:top;
padding-bottom:2px;
z-index:2;
}

li.pink ul{
padding-left:0px;
background-image:url(images/menu/menu6btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.pink li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#dc0cac;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/menu/menu6li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.pink li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#dc0cac;
}

please please help if you can, I wil pay via paypal and can talk to me on msn on [email protected]

thanks

Sign In

Deperate now, Willing to PAY! Please help me - CSS Drop downs

Recommended Posts

scotchegg78

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information