JavaScript 下拉菜单实现代码
5星 · 超过95%的资源 102 浏览量
2020-10-29
23:32:57
上传
评论
收藏 24KB PDF 举报 
JavaScript 下拉菜单实现代码下拉菜单实现代码
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
<title>JavaScript下拉菜
单</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana,
sans-serif;
font-size:small;
}
#navigation, #navigation
li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link,
#navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0
0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li
a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
运行代码
复制代码
保存代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
资源评论
泡泡SOHO2023-07-26：这个文件的JavaScript 下拉菜单实现代码给网页添加了动态效果，让用户体验更加友好。
王佛伟2023-07-26：通过这个文件中的JavaScript 下拉菜单实现代码，我学到了一些有关网页交互设计的知识，受益匪浅。
宏馨2023-07-26：这个JavaScript 下拉菜单实现代码清晰易懂，帮助了我解决了网页交互问题。
设计师马丁2023-07-26：这个JavaScript 下拉菜单实现代码具有良好的兼容性，可以在各种主流浏览器中稳定运行。
滚菩提哦呢2023-07-26：该文件提供的JavaScript 下拉菜单实现代码让我轻松实现了网页的一级菜单展示功能。
