0

I just start programming my Wordpress theme. So i want create my dropdown menu in my header area. Here is my CSS codes ;

/*# 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 code lines here too:

$(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(" » ");

});

And the HTML part is like ; 

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

The question about my sub-level menus.

How can i add top level menu(first li)'s background into submenus containner (the second ul) ? with jquery.

Thanks for your help.

4

2 に答える 2

0

すべてのクラスでこのようなもの：

.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>
}
于 2012-10-29T08:51:39.877 に答える
0

これを使って： 

$("ul.PozHeader .Menus li").hover(function(){ 
     var bg_color=$(this).css("background-color");
     $(this).find("ul").css("background-color",bg_color);
     /*your code*/
});
于 2012-10-29T09:18:53.820 に答える