javascript - 我怎样才能在所有选定的 li-s 中都有白色 url？

Question

我制作了一个 jQuery 垂直下拉菜单，我希望在所有悬停的 li-s 中都有白色 url，而不仅仅是最后一个。

HTML:

<div class="left_menu">


    <ul class="menu">
        <li>
            <a href="#" class="menu_categories">Categories</a>

            <ul>
                <li><a href="#" class="menu_categories_add">Add category</a></li>
                <li><a href="#" class="menu_categories">Manage categories</a></li>
            </ul>
        </li>



        <li>
            <a href="#" class="menu_pages">Galleries</a>

            <ul>
                <li><a href="#" class="menu_pages_add">Add gallery</a></li>
                <li><a href="#" class="menu_pages">Manage galleries</a></li>
            </ul>
        </li>



        <li>
            <a href="#" class="menu_pages">Pages</a>

            <ul>

                <li>
                    <a href="#" class="menu_pages_add">Add page</a>

                    <ul>
                        <li><a href="#" class="menu_pages_add">Add page</a></li>
                        <li><a href="#" class="menu_pages">Manage pages</a></li>
                    </ul>

                </li>


                <li><a href="#" class="menu_pages">Manage pages</a></li>
            </ul>
        </li>



        <li><a href="#" class="menu_settings">Settings</a></li>
    </ul>


</div>

CSS:

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.left_menu {
    width: 219px;
}

.menu li {
    font-weight: 300;
    font-family: verdana;
    font-size: 12px;
    border-bottom: 1px solid #222222;
    border-right: 1px solid #222222;
    background-color: rgba(0,0,0, 0.2);
}

.menu li:hover {
    background-color: rgba(0,0,0, 0.4);
}

.menu li:last-child {
    border-bottom: none;
}

.menu li a {
    text-decoration: none;
    display: block;
    color: #666666;
    padding: 10px 15px;
}

.menu li a:hover {
    color: #ffffff;
}

.menu li ul {
    display: none;
    position: absolute;
    margin: -34px 0 0 219px;
    width: 219px;
}

.menu li ul li {
    background-color: rgba(0,0,0, 0.2);
}

.menu li ul li:hover {
    background-color: rgba(0,0,0, 0.4);
}

jQuery:

$('.menu li').hover(function(){
     $(this).children('ul').show();
}, function(){
     $(this).children('ul').hide();
});

请看这里:JSFiddle

此外，如果您认为可以改进我的 CSS 和 jQuery，也欢迎您。谢谢!

Answer 1

看这里http://jsfiddle.net/Xg6jR/3/

我所做的是将悬停从 a 标签上更改为 li 标签，并将路径修改为直接指向 a:

.menu li:hover > a {
    color: #ffffff;
}

我还添加了以下行并一起删除了 jQuery，使菜单显示时没有 javascript。

 .menu li:hover > ul {
      display: block;   
  }