Добавление фона подменю с jQuery

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

}); 

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

Вопрос о моих вспомогательных меню.

Как я могу добавить фон верхнего уровня меню (первый ли) в подменю containsner (вторая 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*/ 
});