下拉菜单

1、静态网页下拉菜单

html+css

标签<ul><li></li></ul>项目列表

标签链接<a></a>

float浮动

display:block属性

position属性规定元素的定位

 

注意点：

ul li{
    float: left;//垂直列表改成水平列表
    width: 90px;
    line-height: 40px;//垂直居中
    text-align: center;//水平居中
}

2、动态网页下拉菜单

js实现下拉菜单

知识点：

onmouseover：鼠标经过事件

onmouseout鼠标离开事件

使用function关键字定义函数

getElementsByTagName()

注意点：

<li οnmοuseοver="show(this)" οnmοuseοut="hide"><a href="#">中心特色</a>
    <ul id="subul">
        <li><a href="#">htmljavascript</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">java</a></li>
    </ul>
</li>

jquary实现下拉菜单

知识点：

$(function(){})

children()方法查找子元素

show()显示html元素

hide()隐藏html元素

注意：

jquary文件引入的时候应该在最前面

引用方式有两种：

一种是将jquary库下载到本地电脑然后引用

第二种方式是直接引用在线服务器上的jquary库文件

例如引用谷歌服务器上的jquary库文件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>