Problem with CSS Menu in Firefox Chrome

We are having a problem with what our CSS Flyout Navigation Menu is doing to internal webpage hyperlinks. I didn't create this site, but am tasked with maintaining it. The links internal to pages work just fine in all versions of IE, but they do not work in Chrome or Firefox. I believe the problem is the space reserved for the various levels of the CSS flyout, but I don't know how to fix it! I admit to being a CSS novice on this one... As an example in FireFox. http://www.co.siskiyou.ca.us/website/services.aspx The Online Services page hyperlinks do not work above Siskiyou County Jail in Custody Information. Any help would be much appreciated, I'd love to know how to resolve this problem. Thanks, Judy

Here's the css navigation bar code on the style sheet:
#navbar2 {
font-family: arial, sans-serif;
width:550px;
height:150px;
position:relative;
margin:0;
font-size:12px;
margin:50px 0;
}
ul#css3menu,ul#css3menu ul{
margin:0;
list-style:none;
background-color:#4C3029;
width:178px;
height:auto;
border-width:0px 0px 0px 0px;
border-style:solid;
border-color:#FFF;
}
ul#css3menu ul{
display:none;
position:absolute;
left:100%;top:-170px;
padding:0px 0px 0px 0px;
}
ul#css3menu li:hover>*{
display:block;
}
ul#css3menu li:hover{
position:relative;
}
ul#css3menu ul ul{
position:absolute;
left:100%;top:-75px;
padding:0px 0px 0px 0px;

}
ul#css3menu{
padding:0 0px 0px;
display:block;
font-size:0;
position:absolute;
z-index:1000;
left:0px;top:0px;
}
ul#css3menu li{
display:block;
white-space:nowrap;
font-size:0;
}
ul#css3menu>li,ul#css3menu li{
margin:0px 0px 0px 0px;
}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;
}
ul#css3menu a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:12px Arial;
color:white;
cursor:default;
padding:4px;
background-color:#4C3029;
background-image:none;
background-position:0 0;
border-width:0px 0 0 0;
border-style:solid;
border-color:#4C3029;
}
ul#css3menu ul li{
float:none;
}
ul#css3menu ul a{
text-align:left;
}
ul#css3menu li:hover>a{
background-color:#CBBBA7;
border-color:#CBBBA7;
border-style:solid;
font:bold 12px Arial;
color:white;
text-decoration:none;
background-position:0 100%;
}
ul#css3menu img{
border:none;
vertical-align:middle;
margin-right:20px;
width:16px;
height:16px;
}
ul#css3menu ul img{
width:16px;
height:16px;
}
ul#css3menu img.over{
display:none;
}
ul#css3menu li:hover > a img.def{
display:none;
}
ul#css3menu li:hover > a img.over{
display:inline;
}
ul#css3menu span{
display:block;
overflow:visible;
background-image:url("../images/arrowsub.png");
background-position:right center;
background-repeat:no-repeat;
padding-right:2px;
}
ul#css3menu ul span{
background-image:url("../images/arrowsub.png");
padding-right:24px;
}
ul#css3menu li.topfirst>a{
border-width:0;
}
ul#css3menu li.subfirst>a{
border-width:0;
}

 

First, recite the web developer's mantra:

Never, ever use IE as a reference for how things should work. It is the worst browser on the planet. Inept at best, you can never trust IE to do anything right.

Now, on to looking at your problem. You say the links "do not work". When I click on the links in Chrome, they "work". So now I don't understand what you mean.

 

I agree completely. Seriously... Develop in Firefox and use a tool like Firebug which is an extension. Thank me later...

 

It seems the links work well both in IE8 and Firefox8. So explain please more precisely what does not work.

 

change "list-stlye:none;" to "list-stlye-type:none;". I also don't understand why you're using id's for everything.