I would try something like this, tested on IE 8 and FF 3

[CODE=javascript]
<script type="text/javascript">

window.onload = function ()
{
var menu = document.getElementById("menu"); // Get menu object
for (var i=0; i < menu.children.length; i++)
{
menu.children[i].children[0].onclick = menuItemClick; // Add click events for each menu item
}
}

function menuItemClick(event)
{

var target = window.event ? window.event.srcElement : event.target; // Get the menu item being clicked
var parent = target.parentNode; // Get current LI

if ( parent.children.length > 1 ) // If has submenu
{
    var submenu = parent.children[1]; // Get the submenu object

    if ( submenu.style.display == "block" )
    {
        submenu.style.display = "none";
        target.style.color = "#FFFFFF";
        parent.style.background = "#FF0000";
    }
    else
    {
        submenu.style.display = "block";
        target.style.color = "#000000";
        parent.style.background = "#00FF00";
    }
}

}

</script>
[/CODE]

[CODE=css]
<style type="text/css">

.menu li
{
    background: #FF0000;
}

.menu li a
{
    color: #FFFFFF;
}

.menu li ul
{
    display: none;
}

</style>
[/CODE]

[CODE=html]
<div class="menu-layout">
<ul id="menu" class="menu">
<li><a href="#">item 1</a></li>
<li>
<a href="#" >item 2</a>
<ul class="submenu">
<li><a href="#">sub item 1</a></li>
<li><a href="">sub item 2</a></li>
<li><a href="">sub item 3</a></li>
<li><a href="">sub item 4</a></li>
</ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>

[/CODE]