html - 在菜单中添加子项

Question

我需要创建带有过渡效果的菜单。这里是菜单的链接。 http://files.www.gethifi.com/images/nicer-navigation-with-css-transitions/demo.html它与我的预期相同。但是在这个菜单中我们有父元素和子元素。我还需要添加子子元素..我们需要做什么改变..?帮助我..

Answer 1

您好，这是一个使用 jQuery 的答案:

HTML:

<li>
  <a href="#">Widgets</a>
  <ul>
    <li><a href="#">Im another menu</a></li>           
    <li><a href="#">Im another menu</a></li>
    <li><a href="#">Im another menu</a></li>
    <li><a href="#">Im another menu</a></li>
  </ul>
</li>

jQuery:

$("#trans-nav").find("li").each(function(){
    //alert("hover");
    $(this).hover(function(){
        $(this).find("ul:first").attr('style','display:block');            
    });
});

CSS:

#trans-nav li ul li ul{
  display:none;
  position:absolute;
  top:0;
  left:8em;
  background: #63867f;
  width:8em;
}

#trans-nav li ul li ul li a {
  background: #63867f; 
 padding-right:0;
}

在此处查看 jsfiddle 上的实际操作 - http://jsfiddle.net/6Xa8k/