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?

#masthead {
	background:url() repeat-x;
	color: #fff;
	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;

#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{

top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
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

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chrismatrixAuthor Commented:
Thank you very much!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.