Building a menu using css 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><a href="#">Test1</a></span>
            <ul>
                <li><br/><span><a href="#">Sub test1</a>
                    </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

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"><a href="#">Test1</a></li>
         <li class="navmenu"><a href="#">Test2</a>
              <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"><a href="#">Test3</a></li>
         <li class="navmenu"><a href="#">Test4</a></li>
         <li class="navmenu"><a href="#">Test5</a></li>
         <li class="navmenu"><a href="#">Test6</a></li>
         <li class="navmenu"><a href="#">Test7</a></li>
      </ul>
  </div>

Answer 2

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.