Can someone take a look at my code please and let me know if they see anything wrong with it? The drop downs look great in FF but in IE, they won't drop.

I know that IE has a problem with the :hover pseudo class, however, I'm trying to load csshover.htc but it doesn't seem to want to load.

I've just done a clean install on my computer, so I'm not sure if it is a problem on my machine or an actual problem.
I thought it was working.

Anyways... i'm having the problem with Windows 2000 SP4 running IE 6.0 SP1

/* CSS Stylesheet */

* {
   padding: 0;
   margin: 0;
}

h1, h2, h3, h4 {
   background: transparent url(../images/leaf.gif) no-repeat center left;
   padding-left: 40px;
   font-weight: normal;
   line-height: 2em;
   margin-bottom: -.5em;
   margin-right: 1%;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }

body {
   behavior: url(css/csshover.htc);
   background: #660000 url(../images/body-bg.gif);
   font-family: Verdana, san-serif;
   font-size: 80%;
   font-color: #000000;
}

#container {
   background-color: #ffffff;
   width: 780px;
   margin: 25px auto 0 auto;
   border: 2px solid #000000;
}

#header {
   background: url(../images/header-bg.jpg) no-repeat top left;
   width: 100%;
   height: 250px;
   opacity: .4;
   -moz-opacity: .4;
   filter: alpha(opacity=40);
}

#toolbar {
   background: #000000 url(../images/menu-bg.gif) repeat-x top left;
   width: 100%;
   height: 30px;
   color: #FFFFFF;
   border-bottom: 1px solid #787878;
   border-top: 1px solid #787878;
}

/* Drop down menu */
#mainlevel-toolbar {
   list-style: none;
   width: 96%;
   margin: 0 auto;
}

#mainlevel-toolbar li {
   float: left;
   position: relative;
   width: 16.6%;
}


#mainlevel-toolbar li:hover {
   background: url(../images/menu-bg-hover.gif) repeat-x top left;
}

#mainlevel-toolbar li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: 100%;
   display: block;
}

#mainlevel-toolbar li ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 180px;
   background-color: #000000;
   opacity: .5;
   -moz-opacity: .5;
   filter: alpha(opacity=50);
   border: 1px solid #ffffff;
   border-top: 0;
}

#mainlevel-toolbar li > ul {
   top: auto;
   left: auto;
}

#mainlevel-toolbar li:hover ul {
   display: block;
}

#mainlevel-toolbar ul li {
   width: 100%;
}

#mainlevel-toolbar ul li a {
   text-align: left;
   width: 90%;
   padding: 0 5%;
   line-height: 20px;
   height: 20px;
}

#mainlevel-toolbar ul li:hover a {
   background-color: #AAAAAA;
   color: #000000;
}

#contentarea {
   width: 96%;
   margin: 2% auto 0 auto;
}

#contentarea p {
   text-align: justify;
   margin: 1em 1% .5em 0;
}

#content {
   width: 68%;
   padding-right: 2%;
   border-right: 1px solid #CCCCCC;
   float: left;
}

#sidebar {
   width: 27.3%;
   margin-left: 2.5%;
   float: right;
}

#footer {
   width: 780px;
   color: #ffffff;
   text-align: right;
   margin: 0 auto;
   padding-bottom: 5px;
   font-style: italic;
   font-size: .9em;
}

#footer p {
   margin: 0;
   padding: 0;
}

#footer a {
   color: #000000;
}
.clr { clear: both; height: 20px;}
.button { margin: 0 auto; }

I'm trying to load csshover.htc but it doesn't seem to want to load.

Where do you have the HTC file in your structure ? I found that you had to have it at the same level as your pages and you have to be sure to modify the HTC file, there is a location in there that needs to match your structure.

This is my structure:

www.mysite.com <--- This is a Joomla! site
www.mysite.com/templates/temp_name/index.php <-- this is the actual page that I code... Joomla loads this page exactly.
http://www.mysite.com/templates/temp...css/layout.css <-- CSS page
http://www.mysite.com/templates/temp...s/csshover.htc <--- same folder

What should I edit in the htc file? Here it is:

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *        Whatever:hover - V2.02.060206 - hover, active & focus
 *        ------------------------------------------------------------
 *        (c) 2005 - Peter Nederlof
 *        Peterned - http://www.xs4all.nl/~peterned/
 *        License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *        Whatever:hover is free software; you can redistribute it and/or
 *        modify it under the terms of the GNU Lesser General Public
 *        License as published by the Free Software Foundation; either
 *        version 2.1 of the License, or (at your option) any later version.
 *
 *        Whatever:hover is distributed in the hope that it will be useful,
 *        but WITHOUT ANY WARRANTY; without even the implied warranty of
 *        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *        Lesser General Public License for more details.
 *
 *        Credits and thanks to:
 *        Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *        howto: body { behavior:url("csshover.htc"); }
 *        ------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
        onhover:{on:'onmouseover', off:'onmouseout'},
        onactive:{on:'onmousedown', off:'onmouseup'},
        onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
        if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
        window.attachEvent('onunload', unhookHoverEvents);
        var sheets = doc.styleSheets, l = sheets.length;
        for(var i=0; i<l; i++)
                parseStylesheet(sheets[i]);
}
        function parseStylesheet(sheet) {
                if(sheet.imports) {
                        try {
                                var imports = sheet.imports, l = imports.length;
                                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
                        } catch(securityException){}
                }

                try {
                        var rules = (currentSheet = sheet).rules, l = rules.length;
                        for(var j=0; j<l; j++) parseCSSRule(rules[j]);
                } catch(securityException){}
        }

        function parseCSSRule(rule) {
                var select = rule.selectorText, style = rule.style.cssText;
                if(!csshoverReg.test(select) || !style) return;

                var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
                var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
                var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
                var affected = select.replace(/:(hover|active|unknown).*$/, '');
                var elements = getElementsBySelect(affected);
                if(elements.length == 0) return;

                currentSheet.addRule(newSelect, style);
                for(var i=0; i<elements.length; i++)
                        new HoverElement(elements[i], className, activators[pseudo]);
        }

function HoverElement(node, className, events) {
        if(!node.hovers) node.hovers = {};
        if(node.hovers[className]) return;
        node.hovers[className] = true;
        hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
        hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
        function hookHoverEvent(node, type, handler) {
                node.attachEvent(type, handler);
                hoverEvents[hoverEvents.length] = {
                        node:node, type:type, handler:handler
                };
        }

        function unhookHoverEvents() {
                for(var e,i=0; i<hoverEvents.length; i++) {
                        e = hoverEvents[i];
                        e.node.detachEvent(e.type, e.handler);
                }
        }

function getElementsBySelect(rule) {
        var parts, nodes = [doc];
        parts = rule.split(' ');
        for(var i=0; i<parts.length; i++) {
                nodes = getSelectedNodes(parts[i], nodes);
        }        return nodes;
}
        function getSelectedNodes(select, elements) {
                var result, node, nodes = [];
                var identify = (/\#([a-z0-9_-]+)/i).exec(select);
                if(identify) {
                        var element = doc.getElementById(identify[1]);
                        return element? [element]:nodes;
                }

                var classname = (/\.([a-z0-9_-]+)/i).exec(select);
                var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
                var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
                for(var i=0; i<elements.length; i++) {
                        result = tagName? elements[i].all.tags(tagName):elements[i].all;
                        for(var j=0; j<result.length; j++) {
                                node = result[j];
                                if(classReg && !classReg.test(node.className)) continue;
                                nodes[nodes.length] = node;
                        }
                }

                return nodes;
        }
</script>

Thanks LadyInRed.

You gave me an idea, so I created a link and had it execute onclick="javascript:alert(document.location);". By doing this, I saw that you are correct in that the referencing needs to be from the root folder. I was referencing from the css file.

Thank you! I got it.