我有一个JS下拉菜单，我想在飞行中的风格。
我已经得到了它的大部分工作，但当我悬停在一个菜单元素，它改变了bg颜色和文本颜色的整个菜单，而不仅仅是悬停在菜单元素
如何只更改悬停在元素上的样式？
在我的网站上，菜单和样式来自mysql数据库，但对于这个例子，我已经硬编码了菜单元素和样式。
代码：
http://jsfiddle.net/6jz79/
CSS：

#jsddm {
            margin: 0;
            padding: 0
        }
        #jsddm li {
            float: left;
            list-style: none;
            font: 12px Tahoma, Arial
        }
        #jsddm li a {
            display: block;
            padding: 5px 12px;
            text-decoration: none;
            border-right: 1px solid white;
            width: 70px;
            white-space: nowrap
        }
        #jsddm li a:hover {
            background: #fff
        }
        #jsddm li ul {
            margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white
        }
        #jsddm li ul li {
            float: none;
            display: inline
        }
        #jsddm li ul li a {
            width: auto;
            background: #fff
        }
        #jsddm li ul li a:hover {
            background: #fff
        }

字符串
JS：

var timeout = 500;
        var closetimer = 0;
        var ddmenuitem = 0;
        
        function jsddm_open() {
            jsddm_canceltimer();
            jsddm_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }
        
        function jsddm_close() {
            if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }
        
        function jsddm_timer() {
            closetimer = window.setTimeout(jsddm_close, timeout);
        }
        
        function jsddm_canceltimer() {
            if (closetimer) {
                window.clearTimeout(closetimer);
                closetimer = null;
            }
        }
        
        $(document).ready(function () {
            $('#jsddm > li').bind('mouseover', jsddm_open);
            $('#jsddm > li').bind('mouseout', jsddm_timer);
        });
        
        document.onclick = jsddm_close;
        
        
        $('#jsddm > li > a').css({
            'background-color': '#000000',
                'color': '#FFFFFF'
        });
        
        
        $('#jsddm > li > a').mouseenter(function () {
            $('#jsddm > li > a').css({
                'background-color': '#FFFFFF',
                    'color': '#000000'
            });
        });
        $('#jsddm > li > a').mouseleave(function () {
            $('#jsddm > li > a').css({
                'background-color': '#000000',
                    'color': '#FFFFFF'
            });
        });

型
超文本标记语言：

<ul id="jsddm">
              <li><a href="home">Home</a></li>
              <li><a href="products">Products</a>              
                  <ul>
                      <li><a href="product1">Product1</a></li>
                      <li><a href="product2">Product2</a></li>
                  </ul>
              </li>
              <li><a href="contact">Contact Us</a></li>
              <li><a href="about">About Us</a></li>
          </ul>

型