Javascript 如何创建显示隐藏导航菜单

我想创建一个显示隐藏导航菜单如下

---

HTML代码

---

---

我们只需更改

ul

链接的

top

属性，使其默认为负值eq

top:-70px

然后当我们悬停

标题时

通过jquery添加一个名为

show

的类，使

ul

的顶部值

0

这是你的电话号码

我们需要担心的主要代码是

ul

和

标题

属性

HTML:

（过渡将使其成为平滑动画，而不是立即显示）

JS:

---

与论坛网站不同，我们不使用“感谢”或“感谢任何帮助”或签名。顺便说一句，这是“提前感谢”，而不是“提前感谢”。

<div id="menus">
<nav id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BIOGRAPHY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">WRITINGS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>   

#nav ul{
margin-top:10px;
margin-bottom:20px;
padding:50px;
}
#nav ul li{
float:left;
padding:48px;

}
#nav a:link{
color:#999;
}
#nav a:visited{
color:#000;
}
#nav a:hover{
color:#999;
border-bottom-style:solid;
}

  <header> 
    <nav>
      <ul class="menu">
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </nav>
  </header>

ul {

 -webkit-transition:all 0.6s;
  position: relative;
  top: -70px;
}
.show {
  top: 0;
} 

$("header").hover(function() {
  $('ul.menu').toggleClass('show')
})