Building a menu using css html - html

Question

I need my menu to change color when hovering my mouse over each top menu. The problem is the background color for both Test1 and Sub test1 changes as I hover my mouse. Is there any way to not change the background color of Sub test1 until I hover the mouse over it? See the code at http://jsfiddle.net/r5YCU/22/
Any help will be appreciated. Thanks.
<div id="navbar">
<ul>
<li class="navbutton"><span><a id="button-1"
href="">Shop</a></span>
</li>
<li class="navbutton"> <span>Test1</span>
<ul>
<li><br/><span>Sub test1
</span>
</li>
</ul>
</li>
<li class="navbutton"><span><a id="button-3"
href="#">Test2</a>
</span>
</li>
<li class="navbutton"><span><a id="button-4"
href="#">Test3</a></span>
</li>
<li class="navbutton"><span><a id="button-5"
href="#">Test4</a></span>
</li>

Answer 1

I'd play with css :hover pseudoclass instead javascript events, something like:
li.navbutton:hover {
background-color:#345808 !important;
}
li.navbutton:hover li {
background-color: #5c8727!important;
}
li.navbutton li:hover {
background-color: #345808!important;
}
The complete code is: http://jsfiddle.net/r5YCU/31/
I've adapted the layout a bit to look as similar as possible to the original menu, but only with css code.

Answer 2

These things are related to style and should be done in css...
CSS
.ul{
list-style: none;
}
#navbar a{
text-decoration: none;
}
#main-ul{
background: yellow;
}
.navmenu{
float: left;
background: deeppink;
width: 60px;
height: 25px;
margin-right: 3px;
text-align: center;
line-height: 25px;
box-shadow: 0 0 2px 3px black;
}
.navmenu:hover{
outline: 1px solid white;
margin-top: 1px;
}
.navmenu:hover > #sub-ul{
display: block;
width: 100px;
background: red;
}
#sub-ul{
margin: 0;
padding: 0;
display: none;
}
.submenu{
margin: 0;
padding: 0;
margin-bottom: 2px;
background: black;
color: white;
}
.submenu:hover{
cursor: pointer;
color: black;
background: #585858;
}
HTML
<div id="navbar">
<ul class="ul" id="main-ul">
<li class="navmenu">Test1</li>
<li class="navmenu">Test2
<ul class="ul" id="sub-ul">
<li class="submenu">Test 1</li>
<li class="submenu">Test 2</li>
<li class="submenu">Test 3</li>
<li class="submenu">Test 4</li>
<li class="submenu">Test 5</li>
<li class="submenu">Test 6</li>
<li class="submenu">Test 7</li>
<li class="submenu">Test 8</li>
</ul>
</li>
<li class="navmenu">Test3</li>
<li class="navmenu">Test4</li>
<li class="navmenu">Test5</li>
<li class="navmenu">Test6</li>
<li class="navmenu">Test7</li>
</ul>
</div>