css not dropping down

I have a css menu on my page (www.matrixitcomputers.co.uk/indexwithflash.shtml) which has stopped working properly.
now the menu doesn't drop down when i hover over it.

Could someone point out what needs to change so this will work?

Thanks
#masthead {
	background:url() repeat-x;
	color: #fff;
	background-color:#999;
	padding: 0px;
	margin: 0;
	height: 73px; /* may need to change this */
	border-bottom: 1px solid #fff;
		
}

#masthead .content {
	padding: 0px;
}

/****************   CSS MENU ************************/


#masthead .chromestyle{
width: 100%;
font-weight: bold;
font-size: .90em;
height: 80px;


}

#masthead .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#masthead .telno {float:left;
					width:200px;
					color:#FFF;
					text-align:left;
					margin-left:15px;}

#masthead .chromestyle ul{
border: px solid #BBB;
width: 100%;
background: url(img/menu/nav-bg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 28px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

#masthead .chromestyle ul li{
display: inline;
}

#masthead .chromestyle ul li a{
color: #fff;
padding: 4px 8px;
margin: 0;
text-decoration: none;
border-right: 0px solid #DADADA;
}

#masthead .chromestyle ul li a:hover{
background: url(img/menu/bg_over.png) center center repeat-x; /*THEME CHANGE HERE*/
padding-bottom: 10px;


}

/*#masthead .chromestyle ul li a[rel]:after{ 
content: " v";
content: " " url(downimage.gif); /*uncomment this line to use an image instead
}*/


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

#masthead .dropmenudiv{

position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
line-height:18px;
z-index:100;
background-color:#333;
width: 200px;
visibility: hidden;
/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);*/ }


#masthead .dropmenudiv a{

width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #fff;
}


* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

#masthead .dropmenudiv a:hover, a:active{ /*THEME CHANGE HERE*/
background-color: #000;
color: #6699ff
}

Open in new window

chrismatrixAsked:
Who is Participating?
 
Chris StanyonCommented:
The problem is in your Javascript, not your CSS.

Inside chrome.js, line 11 causes an error which stops your dropdowns from working. If you've edited this file, then restore it back to a previous version.

Alternatively, download the latest version of that script and replace your copy of chrome.js with the new one - http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
//The offending code
.dropmenudiv a {
        height: 80px; //Whatever height required
}

Open in new window

0
 
chrismatrixAuthor Commented:
Thank you very much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.