FF & IE Compatibility Help, PLEASE@

Hey guys, so I am having some trouble with my drop down menu working in IE and FF, I am trying to repeat that three time throughout the page, and the drop down menu only works on one of the 3 times I'm trying to use it. Please help. Thanks! Below is the html and the css

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">What We Have to Offer</a></li>
<li><a href="#" rel="dropmenu2">About L.H.S.</a></li>
<li><a href="#">Coaches</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="parents.html">Parents</a>
<a href="coachesteams.html">Coaches/Teams</a>
<a href="athletes.html">Athletes</a>
<a href="signup.html">Signup</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="phil.html">Philosophy</a>
<a href="aim.html">Aim</a>
<a href="programdesign.html">Program Design</a>
<a href="signup.html">Sign-Up</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#">Post Play</a>
<a href="#">Put Back</a>
<a href="#">Mikan Drill</a>
<a href="#">Resistance Training</a>
<a href="#">Plyometrics</a>
<a href="#">Verticle Jump</a>
<a href="#">Strength and Agility Training</a>
<a href="#">Endurance</a>
</div>



<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>






.chromestyle{
width: 99%;
font-weight: bold;
}

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

.chromestyle ul{
width: 100%;

padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

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

.chromestyle ul li a:hover{

}

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


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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv2{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.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: black;
}

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

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

Hi,

First, your code needs to be wrapped in code tags, its annoying and hard to read without them.

<div class="chromestyle" id="chromemenu">
Your declaring all your divs as both a class and id...

Your calling div id's (and classes) when your CSS is full of only classes....

Use ID's for things that will be used once in a page, classes for multiple use (in a nutshell).

I think it would be best if you read up on some basic CSS tutorials, start here: http://www.w3schools.com/css/default.asp

For now, it will be a lot easier to give us a link to your site to help you so we can see everything.

Regards,

Drew

The ID's, are just to link the main link name and the drop down menus. Is there another way to do it? The link is: http://osbournwebdesign.com/lhs/

I've never done a drop down menu before....

Forgot to mention, the whole things works perfectly in FF, but ONLY the first row works in IE

The ID's, are just to link the main link name and the drop down menus.
Sorry, I missed the javascript in your code so I assumed something else.

First, your page needs a proper doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Second, these need to be fixed:http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fosbournwebdesign.com%2Flhs%2F

thirdly, your CSS: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fosbournwebdesign.com%2Flhs%2F

Fix your errors, and then take it from there :thumbsup:

Drew