Question

我刚开始编写Wordpress主题。所以我想在标题区域中创建我的下拉菜单。这是我的CSS代码;

/*# Menus  #*/
.PozHeader .Menus ul{margin:0px;padding:0px;}
.PozHeader .Menus ul li a{ font-size:14px; color:#fff;display:block; }
.PozHeader .Menus ul ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;padding-top:10px; }
.PozHeader .Menus ul ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; float: none; }
.PozHeader .Menus ul ul li a{ border-right: none; width: 100%; display: inline-block; } 
.PozHeader .Menus ul ul ul{ left: 100%; top: 0; }
.PozHeader .Menus ul li:hover > ul{ visibility: visible; }
.PozHeader .Menus ul li a:hover { font-size:14px; color:#fff; }
.PozHeader .Menus ul li {float:left;min-width:50px;text-align:center;position:relative;padding:5px 10px 5px 10px;margin:0px 5px 0px 0px;color:#fff; }
.PozHeader .Menus ul li:hover{color:#000;background:#437DBC;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.PozHeader .Menus ul li.Home { background:#437DBC; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Pink { background:#EA3373; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Dark-Pink { background:#B8027B; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Green { background:#24AF95; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Light-Green { background:#4FB763; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Yellow { background:#FF8201; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Red { background:#DE3F44; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.PozHeader .Menus ul li.Purple { background:#8F74B9; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}

Jquery代码行也在这里：

$(function(){

    $("ul..PozHeader .Menus li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.PozHeader .Menus li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

HTML部分就像;

        <div class="Menus">
        <ul>
            <li class="Home"><a href="">ANA SAYFA</a> </li>
            <li class="Pink"><a href="">ELBİSE MODELLERİ</a>
                <ul>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                </ul>
            </li>
            <li class="Dark-Pink"><a href="">MAKYAJ</a>
                <ul>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                    <li><a href="">Sub Menu</a></li>
                </ul>
            </li>
            <li class="Green"><a href="">MODA</a></li>
            <li class="Light-Green"><a href="">İÇ GİYİM</a></li>
            <li class="Yellow"><a href="">AYAKKABI</a></li>
            <li class="Red"><a href="">AKSESUARLAR</a></li>
            <li class="Purple"><a href="">TAKILAR</a></li>
        </ul>
        </div>

关于我的子级别菜单的问题。

如何将顶级菜单（第一个li）的背景添加到子菜单包含器（第二个ul）中？ 使用jquery。

感谢您的帮助。

Answer 1

所有课程都是这样的：

.PozHeader .Menus ul li.purple,
.PozHeader .Menus ul li.purple ul li { 
    background-color: <your-color>
}

.PozHeader .Menus ul li.<class_name>,
.PozHeader .Menus ul li.<class_name> ul li { 
    background-color: <your-color>
}

Answer 2

使用此：

$("ul.PozHeader .Menus li").hover(function(){ 
     var bg_color=$(this).css("background-color");
     $(this).find("ul").css("background-color",bg_color);
     /*your code*/
});

使用jQuery添加子菜单背景

2 个答案: