Conflicts between CSS Menu and Image as Links

Question

There is logo on the top (image as link) and other images as links. These links are not working in FF and safari. The problem is with css/ul/li based navigation menu. If I remove the menu html code, images as links are working fine. The css based navigation menu is based on this code:

/* Navigation Menu */
#nav a, #nav a:hover, #nav a:focus {...}
#nav {...}
#nav ul {...}
#nav .menu .level1-li {...}
#nav .menu a {...}
#nav .menu a.level1-a {...}
#nav .menu .sub {...}
#nav .menu .sub a {...}
#nav .menu a:hover {...}

I am not much familiar with CSS and this is the example I have downloaded from the web. It seems "a" is doing something wrong here.

Prashant

Answer 1

#nav a, #nav a:hover, #nav a:focus {direction:ltr; outline:0;}
#nav {background:#252525; background:url(../images/tabs_0.gif) repeat-x left top;height:30px; font:normal 12px/30px arial, verdana, sans-serif; width:800px; margin:0 auto;border-bottom-style:solid;border-width:1px;border-color:#525151;}
#nav ul {margin:0; padding:0; list-style:none; display:inline-block;}
#nav .menu .level1-li {float:left; display:inline; width:160px; margin-top:-32000px;}
#nav .menu a {background:transparent;display:block; font-weight:bold; width:160px; text-decoration:none; text-align:center; color:#fff;}
#nav .menu a.level1-a {position:relative; float:left; display:inline; margin-right:-159px; margin-top:32000px;}
#nav .menu .sub {background:#F6C739;float:left; margin-top:-30px; padding-top:30px; margin-bottom:-32000px;}
#nav .menu .sub a {background:#4a4a4a; font-weight: normal; font-size: 9pt;text-align:left; position:relative; margin-right:-1px;text-indent:10px;}
#nav .menu a:hover {background:#F6C739;margin-right:0px; color:#000000;}