Accordion not working

This question is in regard to these:

https://teamtreehouse.com/library/create-an-accordion-menu-with-css

http://teamtreehouse.com/library/create-an-accordion-menu-with-css-2

Unfortunately both of these have issues in older desktop browsers (like IE6), old Android browsers, and using them in Joomla, which doesn't have a convenient way to insert CSS on a per-article-basis without messing with the associated template's CSS.

Fortunately I'm working on migrating the site from Joomla to Wordpress and under WordPress there is a old CSS Manager plugin:

http://mywebsiteadvisor.com/tools/wordpress-plugins/custom-css-manager-plugin/

--that adds a custom css injection section to each WP Page edit screen.

Here's the simple HTML I used for testing:

</ul>
</li>
<li><a href="#">Header 3</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">Header 4</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
</ul>

Here's the accordion CSS that worked (except IE6 which will

probably needs a javascript polyfill):

.accordion-menu li { width:150px; }
.accordion-menu a {
    display:block;
    width:148px;
    padding:2px;
    background:#aaddaa;
    border:1px solid #99aa99;
    border-radius:3px;
    margin:1px;
    text-decoration:none;
    color:#337733;
    font-weight:bold;
}
.accordion-menu ul a {
    text-indent:10px;
    background:#ddffdd;
    color:#77aa77;
}
.accordion-menu ul a:hover {
    color:#fff;
    background:#339933;
}
.accordion-menu, .accordion-menu ul { padding:0; margin:0; }
.accordion-menu li { list-style:none; }
.accordion-menu li ul { display:none; }
.accordion-menu li:hover ul { display:block; }

There are several javascript based pseudo class fix/hacks out there for IE6.

I've used this one more than once:

http://robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

I wish the course above had at least mentioned a links to a few such IE6 hacks to try and extend the backward compatibility for accordions.

I also wish more of the Treehouse site used accordions.