Problem Skinning Chrome Menu

[sartajc]

1) Script Title:
Chrome CSS Drop Down Menu (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

I was using this script on my site http://muslimonline.org , but wanted to change it so that the main links would look like the tabs in this template.

However, as you can see right now on my site, for some reason its not working and the background image isn't coming up. do you know whats wrong?

heres the CSS code thats currently being implemented on the menu:

.chromestyle{
overflow: hidden; /* no idea why this works, but it fixes a FF 

problem */
}

.chromestyle:after{ /*Add margin between menu and rest of content 

in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
	margin: 0 20px;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
}

.chromestyle ul li{
	display: inline;
	float: left;
}

.chromestyle li a{
	float: left;
	background:url(menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

.chromestyle span {
	background: transparent url(menuright.png) no-repeat right 

top;
	padding:5px 15px 4px 6px;
	color:#83BC5A;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you 

roll over the link for some reason. This fixes it */
}

.chromestyle ul li a:hover{
 background-position:0% -42px;
}
.chromestyle a:hover span {	background-position:100% -42px; }

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down 

link*/

}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
background-color: #FFFFFF;
top: 0;
border: 0px solid #84C95C; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
width: 200px;
visibility: hidden;
filter: 

progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=13

5,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: 100%;
display: block;
background-color: #FFFFFF;
text-indent: 3px;
border: 0px solid #84C95C; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #84C95C;
}

Heres the code on of the menu:

<div class="chromestyle" id="chromemenu" width="100%">
<ul>
<li><a href="http://muslimonline.org"><span>Home</span></a></li>
<li><a href="http://muslimonline.org/forums.html"><span>Forum</span></a></li>
<li><a href="#" rel="dropmenu1"><span>Live Chat</a></span></li>
<li><a href="#" rel="dropmenu2"><span>Community</a></span></li>
<li><a href="#" rel="dropmenu3"><span>Arcade</a></span></li>
<li><a href="#" rel="dropmenu4"><span>Music/Videos</a></span></li>
<li><a href="#" rel="dropmenu5"><span>Downloads</a></span></li>
<li><a href="#" rel="dropmenu6"><span>Search</a></span></li>
<li><a href="#" rel="dropmenu7"><span>Help</a></span></li>
<li><a href="#" rel="dropmenu8"><span>Parters</a></span></li>
<li><a href="#" rel="dropmenu9"><span>Donate</a></span></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/index.php?autocom=azchat">Live Chat</a>
<a href="http://chat.muslimonline.org">Chat Rooms</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/index.php?autocom=blogs">Blogs</a>
<a href="http://muslimonline.org/member-list.html">Members</a>
<a href="http://muslimonline.org/index.php?autocom=teams">Groups</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/arcade.html">Arcade</a>
<a href="http://muslimonline.org/index.php?autocom=army&core=armysystem2">Muslim RPG</a>
<a href="http://www.muslimonline.org/index.php?act=mliteca&code=viewcat&cat_id=2">Naats/Nasheeds</a>
<a href="http://www.muslimonline.org/index.php?act=mlite">Music/Videos</a>
</div>

<!--4rd drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.muslimonline.org/index.php?act=mliteca&code=viewcat&cat_id=2">Naats/Nasheeds</a>
<a href="http://www.muslimonline.org/index.php?act=mlite">Music/Videos</a>
</div>

<!--5th drop down menu -->                                                
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/index.php?act=downloads">Free Downloads</a>
<a href="http://wallpaper.muslimonline.org">Islamic Wallpaper</a>
</div>

<!--6th drop down menu -->                                                
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/search.html">Search Site</a>
<a href="http://muslimonline.org/index.php?act=quran">Search Quran</a>
<a href="http://muslimonline.org/cgi-bin/hadith.cgi">Search Hadith</a>
</div>

<!--7th drop down menu -->                                                
<div id="dropmenu7" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/help.html">Help</a>
<a href="http://muslimonline.org/help.html&CODE=01&HID=21">New To Site?</a>
</div>

<!--8th drop down menu -->                                                
<div id="dropmenu8" class="dropmenudiv" style="width: 150px;">
<a href="http://famousmuslims.muslimonline.org">Famous Muslims</a>
<a href="http://www.grungemedia.com">Grunge Media</a>
</div>

<!--9th drop down menu -->                                                
<div id="dropmenu9" class="dropmenudiv" style="width: 150px;">
<a href="http://muslimonline.org/donate.html">Donate</a>
<a href="http://www.muslimonline.org/help.html&CODE=01&HID=23">Promote Us</a>
<a href="http://www.muslimonline.org/help.html&CODE=01&HID=22">Advertise</a>
</div>



<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

Heres the ORIGINAL CSS CODE ON THE TEMPLATE THAT INVOLVES THE MENU:

<style>

/* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking */




#menu-top {
	overflow: hidden; /* no idea why this works, but it fixes a FF problem */
}

#menu-top ul {
	margin: 0 20px;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
}

#menu-top li {
	display: inline;
	float: left;
}

#menu-top a {
	float: left;
	background:url(images/menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

#menu-top a span {
	background: transparent url(images/menuright.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#83BC5A;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

 #menu-top a:hover { background-position:0% -42px; }
 #menu-top a:hover span {	background-position:100% -42px; }


</style>

Heres the example menu list on the template:

<div id="menu-top">
	<ul>
		<li><a href="#" title="Downloads"><span>Downloads</span></a></li>
		<li><a href="#" title="Gallery"><span>Gallery</span></a></li>
		<li><a href="#" title="Links"><span>Links</span></a></li>
		<li><a href="#" title="Links"><span>Links</span></a></li>
		<li><a href="#" title="Links"><span>Links</span></a></li>
		<li><a href="#" title="Links"><span>Links</span></a></li>
	</ul>
</div>

Do you know whats wrong with my code?

[sartajc]

anyone?