用JavaScript做网页下拉菜单(网页制作下拉菜单)
利用JS实现新浪下拉菜单
style
????????.clearfix::after?{
????????????display:?block;
????????????content:?"";
????????????clear:?both;
????????}
????????ul,
????????li?{
????????????list-style:?none;
????????}
????????.navli?{
????????????float:?left;
????????????margin:?0?10px;
????????}
????????.navli?ul?{
????????????display:?none;
????????}
????/style
/head
body
????ul?class="nav?clearfix"
????????li
????????????a?href=""微博/a
????????????ul
????????????????li私信/li
????????????????li评论/li
????????????????li@我/li
????????????/ul
????????/li
????????li
????????????a?href=""微博/a
????????????ul
????????????????li私信/li
????????????????li评论/li
????????????????li@我/li
????????????/ul
????????/li
????????li
????????????a?href=""微博/a
????????????ul
????????????????li私信/li
????????????????li评论/li
????????????????li@我/li
????????????/ul
????????/li
????????li
????????????a?href=""微博/a
????????????ul
????????????????li私信/li
????????????????li评论/li
????????????????li@我/li
????????????/ul
????????/li
????/ul
????script
????????//案例分析：导航栏里面的li都要有鼠标经过效果?所以需要循环注册鼠标事件
????????//核心原理：当鼠标经过li里面的第二个孩子ul显示?当鼠标离开?ul隐藏
????????var?nav?=?document.querySelector('.nav');
????????var?lis?=?nav.children;
????????for?(var?i?=?0;?i??lis.length;?i++)?{
????????????lis[i].onmouseover?=?function()?{
????????????????this.children[1].style.display?=?'block';
????????????}
????????????lis[i].onmouseout?=?function()?{
????????????????this.children[1].style.display?=?'none';
????????????}
????????}
????/script
怎么用JS写个下拉菜单
其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none;当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；
html+css+javascript 菜单单击式下拉菜单怎么弄？
【方法步骤】：
写好HTML代码以实现下拉菜单。
在网页上看到初步效果。
添加JavaScript代码实现功能，hide（）函数实现display的隐藏。
在HTML代码中引用show()和hide()函数。
CTR+S保存代码，在浏览器中F5刷新网页查看效果。
【其他方法】：
利用Html5+css实现的下拉菜单炫酷效果。html
head
meta charset="UTF-8"
title/title
style type="text/css"
*{
margin: 0;
padding: 0;
}
#nav{
background-color: #EEEEEE;
height: 40px;
!DOCTYPE html。
使用JavaScript实现下拉菜单的效果。!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style type="text/css"
通过JQuery方法实现的下拉菜单的炫酷效果。!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style type="text/css"
【注意事项】：记得CTR+S常记得保存的备份，F5刷新网页。