My css menu not working right

hey whats going out there My first post here got a issue with my css drop down menu http://jsalarms.graffintheno.comwhen ever mouse goes over the tab the drop down menu is not underneath it like it suppose to be. I validated both the html and css files. Here is the code

HTML

J's Alarms And Car Audio

//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu", 0)

Featured Rides

Catalog

Our Team

Support

Contacts

Links and Buttons Other

//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu")

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dolor erat, pharetra ut, molestie sed, condimentum nec, magna. Aenean eget odio sed mauris hendrerit aliquet. Aliquam nibh felis, vestibulum ac, scelerisque eu, dapibus eget, nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et libero. Morbi eu tortor. Praesent nec ligula. Cras ac ipsum. Mauris adipiscing felis ut dolor. Phasellus pharetra sollicitudin augue. Mauris turpis tortor, posuere eget, tincidunt sit amet, feugiat nec, nunc. Proin ac ante sed neque cursus varius. Integer nec urna. Nam lacinia fermentum dolor. Ut eget nunc. Sed ut felis.

Vivamus ac enim sit amet sapien sodales vehicula. Praesent quis quam eget nisl iaculis laoreet. Fusce odio eros, luctus vel, luctus eget, sodales ut, pede. Nunc a felis. Phasellus erat pede, placerat vel, rutrum non, semper eu, felis. Maecenas eu leo. Integer eu magna consequat libero vulputate dignissim. Donec vulputate. Phasellus ut orci. Nullam tincidunt aliquam dui. Nullam eu odio.

Vivamus ac enim sit amet sapien sodales vehicula. Praesent quis quam eget nisl iaculis laoreet. Fusce odio eros, luctus vel, luctus eget, sodales ut, pede. Nunc a felis. Phasellus erat pede, placerat vel, rutrum non, semper eu, felis. Maecenas eu leo. Integer eu magna consequat libero vulputate dignissim. Donec vulputate. Phasellus ut orci. Nullam tincidunt aliquam dui. Nullam eu odio.

Vivamus ac enim sit amet sapien sodales vehicula. Praesent quis quam eget nisl iaculis laoreet. Fusce odio eros, luctus vel, luctus eget, sodales ut, pede. Nunc a felis. Phasellus erat pede, placerat vel, rutrum non, semper eu, felis. Maecenas eu leo. Integer eu magna consequat libero vulputate dignissim. Donec vulputate. Phasellus ut orci. Nullam tincidunt aliquam dui. Nullam eu odio.

©2007 J's Alarms & Car Audio

All Rights Reserved

CSS for the navigation

.slidetabsmenu{
float:left;
width:100%;
font-size: 12px;
line-height:normal;
border-bottom: 0px solid gray;
}

* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
}

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

.slidetabsmenu a{
float:left;
background:url(media/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 5px;
padding:0 0 0 9px;
text-decoration:none;
}

.slidetabsmenu a span {
float:left;
display:block;
background:url(media/slide-right.gif) no-repeat right top;
padding:2px 13px 2px 4px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}

.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -125px;
}

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -125px;
}

html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}

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

.dropmenudiv_c{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}

.dropmenudiv_c a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

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

.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #eaeaea;
}

Web Page css

/*
Here is the stylesheet for the site. If you change the name of this file you will also have to change the corrosponding line
in the html file. I have documented the things that you will probably want to change which is mainly color and font styles.
If you are completely unfamiliar with CSS you should definitely visit http://w3schools.com for a brush up on how things
work. Also I often times use a 3 digit color format which some people may not be familiar with. It's just a shorthand
way of writing colors. You just duplicate each number and you will get the 6 digit hex code.
Examples:
#fff = #ffffff
#000 = #000000
#43f = #4433ff
*/

/*
body
This is the body tag. The main items you may want to change are background, font, line-height, and color.
In the background tag change the hex code to the color of your background that you figured out.
DO NOT change the font size from 0px. It is set that way to fix a design issue, the size of the text for each
panel is set later in this document. If you change the color tag it will set the default color for text.
*/
body {
margin: 0px 0px 10px 0px;
padding: 0px;
background: #0d1a26 url(images/bg.gif) top left repeat-x;
font: 0px Arial, Tahoma, sans-serif;
line-height: 200%;
color: #333;
}

#container {
position: relative;
margin: 0px auto 0px auto;
padding: 0px;
width: 770px;
background: url(images/container_bg.gif);
}

#containerTop {
margin: 10px auto 0px auto;
padding: 0px;
width: 770px;
height: 20px;
background: url(images/container_top.gif) top left no-repeat;
}

#containerBottom {
margin: 0px auto 0px auto;
padding: 0px;
width: 770px;
height: 20px;
background: url(images/container_bottom.gif) top left no-repeat;
}

#header {
margin: 0px auto 0px auto;
padding: 0px;
width: 750px;
height: 122px;
background: url(images/header.gif) top left no-repeat;
}

/*
#mainMenu
Here you can change the font size and face of the text for the menu items.
If you change the color tag, it will change the color of the seperator characters which is a pipe | by default.
*/
#mainMenu {
margin: 10px auto 0px auto;
padding: 0px;
width: 750px;
height: 30px;
background: url(images/menu_bg.gif) top left no-repeat;
font: 12px Arial, Tahoma, sans-serif;
color: #fff;
}

#mainMenu ul {
margin: 0px;
padding: 0px;
display: inline;
list-style-type: none;
}

#mainMenu li {
margin: 7px 0px 0px 7px;
padding: 0px;
float: left;
}

/*
#mainMenu a
If you change the color here, it will change the color of your menu links.
*/
#mainMenu a {
margin: 0px;
padding: 0px;
color: #fff;
font-weight: bold;
text-decoration: none;
}

/*
#mainMenu a:hover
This is the color of the menu links when you hover the mouse over them. Change it to whatever you need.
*/
#mainMenu a:hover {
color: #fc0;
}

/*
#bodyContainer
You can change the font here. This will change the font for the left panel and the body panel.
*/
#bodyContainer {
position: relative;
float: left;
left: 10px;
margin: 0px auto 0px auto;
padding: 0px;
width: 750px;
background: url(images/body_bg.gif);
font: 12px Arial, Tahoma, sans-serif;
}

#bodyTop {
position: relative;
float: left;
left: 10px;
margin: 10px auto 0px auto;
padding: 0px;
width: 750px;
height: 14px;
background: url(images/body_top.gif) top left no-repeat;
}

#bodyBottom {
position: relative;
float: left;
left: 10px;
margin: 0px auto 10px auto;
padding: 0px;
width: 750px;
height: 14px;
background: url(images/body_bottom.gif) top left no-repeat;
}

/*
#leftPanel
The font for this left panel is inherited from the #body id. However if you want to have a different color or font
text here, you may add the color or font tags.
*/
#leftPanel {
float: left;
margin: 0px auto 0px 0px;
padding: 5px;
width: 235px;
}

/*
#bodyPanel
The font for this body panel is inherited from the #body id. However if you want to have a different color or font
text here, you may add the color or font tags.
*/
#bodyPanel {
float: right;
margin: 0px 0px 0px auto;
padding: 5px;
width: 485px;
}

#footer {
clear: both;
margin: 0px auto 0px auto;
padding: 0px;
width: 750px;
height: 84px;
background: url(images/footer.gif) top left no-repeat;
text-align: right;
}

/*
#copyright
You can change the font or color of the copyright text by modifying those tags here.
*/
#copyright {
margin: 0px;
padding: 17px;
color: #fff;
font: 10px "Century Gothic", Courier, monospace;
}

/*
------------------------------------------------------------------------------------------------------
The following tags are not required for the design and you may modify them however you wish.
You may want to change the color in the h1 and h2 tags as well as the tag labeled h3, h4, h5, h6.
I have set images to have a padding around them and be displayed in block mode, you may change this.
I have also set the default link styles in the a tags. If you want to learn more about CSS and how
it works, visit this page: http://www.w3schools.com/css/default.asp. It's got some great information
on each property of CSS.
------------------------------------------------------------------------------------------------------
*/

p {
margin: 0px 0px 20px 0px;
padding: 0px;
}

h1 {
margin: 0px 0px 5px 0px;
padding: 0px;
font-size: 20px;
color: #3656b0;
width: 100%;
}

h2 {
margin: 0px 0px 5px 0px;
padding: 0px;
font-size: 18px;
color: #3656b0;
}

h3, h4, h5, h6 {
margin: 0px 0px 5px 0px;
padding: 0px;
font-size: 16px;
color: #3656b0;
}

img {
display: block;
margin: 7px;
padding: 0px;
}

a {
color: #3656b0;
text-decoration: underline;
}

a:hover {
color: #6a88dc;
} :jawdrop: :jawdrop: