키핑 부모 리는 것처럼 하위 메뉴가 열릴 때 하위 메뉴

Question

가 활성화 색상으로 메뉴 헤더를 얻기 위해 시도에 공중 선회

CSS :

#main-nav, #main-nav ul { 
margin:0; 
padding:0; 
list-style:none; 
list-style-position:outside; 
position:relative; 
line-height:1.5em; 
} 
#main-nav a:link, #main-nav a:active, #main-nav a:visited { 
display:block; 
padding:0px 5px; 
color:#FFF; 
text-decoration:none; 
background:#03C; 
} 
#main-nav a:hover { 
background:#CCC; 
} 
#main-nav li { 
float:left; 
position:relative; 
} 
#main-nav ul { 
position:absolute; 
width:12em; 
top:auto; 
display:none; 
} 
#main-nav li ul a { 
border:1px solid #333; 
border-top:0px; 
width:12em; 
float:left; 
} 
#main-nav ul ul { 
top:auto; 
} 
#main-nav li ul ul { 
left:12em; 
margin:0px 0 0 10px; 
} 
#main-nav li:hover ul ul, #main-nav li:hover ul ul ul, #main-nav li:hover ul ul ul ul { 
display:none; 
} 
#main-nav li:hover ul, #main-nav li li:hover ul, #main-nav li li li:hover ul, #main-nav li li li li:hover ul { 
display:block; 
} 

JQuery와 :

$(document).ready(function(){ 
$("#main-nav ul").css({display: "none"}); 
    $("#main-nav li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
     $("ul").prev("ul").attr('style', 'background-color:#000'); 
    },function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
    }); 
    $("#main-nav li li a").hover(function(){ 
     $(this).parent("a").attr('style', 'background-color:#000'); 
    }); 
}); 

HTML/PHP

<ul id="main-nav"> 
    <li><a href="<?=HOME;?>">Home</a></li> 
    <li><a href="#">Browse</a> 
     <ul> 
      <li><a href="<?=SEARCH;?>" style="border-top:1px solid #333">Search</a></li> 
      <li><a href="<?=ONLINE;?>">Who's Online</a></li> 
     </ul> 
      </li> 
      <li><a href="#">Messages</a> 
       <ul> 
      <li><a href="<?=INBOX;?>" style="border-top:1px solid #333">Inbox</a></li> 
      <li><a href="<?=COMPOSE;?>">Compose</a></li> 
      <li><a href="<?=SENT;?>">Sent</a></li> 
      <li><a href="<?=TRASH;?>">Trash</a></li> 
     </ul> 
      </li> 
      <li><a href="#">Favorites</a> 
     <ul> 
      <li><a href="<?=MYFAVS;?>" style="border-top:1px solid #333">My Favorites</a></li> 
      <li><a href="<?=ONLINEFAVS;?>">Online Favorites</a></li> 
      <li><a href="<?=WHOSFAVS;?>">Whose Favorite Am I?</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Account</a> 
     <ul> 
      <li><a href="<?=MYPROFILE.$uid;?>" style="border-top:1px solid #333">My Profile</a></li> 
      <li><a href="<?=EDITPROFILE;?>">Edit Profile/Account Settings</a>  </li> 
      <li><a href="#" id="uploadphoto">Upload Photo's</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Help</a> 
     <ul> 
      <li><a href="<?=CONTACT;?>" style="border-top:1px solid #333">Contact Us</a></li> 
      <li><a href="<?=PRIVACY;?>">Privacy Policy</a></li> 
      <li><a href="<?=TOS;?>">Terms of Service</a></li> 
      <li><a href="<?=ABOUTUS;?>">About Us</a></li> 
     </ul> 
    </li> 
    </ul> 

Answer 1

당신이 찾고있는 것을 할 것입니다 : jsfiddle