飼養家長裏彷彿徘徊在子菜單打開時，子菜單

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>

來源

2011-05-12 Bobby

我覺得這個將做你正在尋找的東西：jsfiddle

來源

2011-05-12 03:10:45

謝謝，我以爲我離開了一些父母。 – Bobby 2011-05-12 03:15:10

沒問題。我不確定是否有更好的方法。我不喜歡'parent（）。parent（）...'但似乎沒有別的辦法。如果有人知道縮短我想知道的方法。我寧願看到'.parent（「li」）。find（「a：first」）'但我無法按預期工作。 – 2011-05-12 03:18:10

飼養家長裏彷彿徘徊在子菜單打開時，子菜單

回答

相關問題