Question

我创建了一个jQuery垂直下拉菜单，我希望所有li-s中都有白色网址，而不仅仅是最后一个。

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;   
  }

Answer 2

将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:hover > a {
    color: #fff;
}

.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);
}

Answer 3

你可以将它添加到你的CSS：

.menu > li:hover > a, .menu > li > ul li:hover a {color: white}

我如何在所有选定的li-s中都有白色网址？

3 个答案: