使用jquery将淡入淡出的垂直子菜单添加到单页html

Question

我想向已有的菜单中添加垂直子菜单。

我希望在悬停时有this effect ....

我添加了一些代码，但不起作用，我应该添加什么(不想要那些图标)，只是efecct，但我似乎没有完成任务，有没有办法添加淡入淡出效果到该子菜单？

The jsfiddle is this

<div id="header-wrap">
    <header>
        <nav>
            <ul>
                <li><a href="#main">Init   </a></li>
                 <li><a href="#services">Services</a> </li>
                <li><a href="#portfolio">portfolio</a></li>
                <li><a href="#about-us">about us  </a></li>
                 <li><a href="#contact">Contact</a></li>

               <ul class="submenu">
                  <li><a href="#services-1">Service1</a></li>
                 <br>
                 <li><a href="#services-2">Service2</a></li>
                 <br>
                <li><a href="#services-3">Service3</a></li>
                </ul>
            </ul>
        </nav>
    </header>
</div>

Answer 1

淡入淡出效果是由名为transition的CSS3属性造成的(您可能必须使用供应商前缀)。这与jQuery没有任何关系。