使用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无关。