JS CSS写下拉菜单 竖行
2024-08-27 20:31:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one li {
width: 100px;
height: 30px;
line-height: 30px;
background: url(nav/libg.jpg) no-repeat;
//float: left;
text-align: center;
margin-left: 10px;
cursor: pointer;
_display: inline;
position: relative;
} li ul {
position: absolute;
left: 0;
top: 30px;
display: none;
}
.cd{
margin-top: -30px;
margin-left: 65px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<ul class="one">
<li id="li01">
<span>一级菜单</span>
<ul id="ul01"class="cd" >
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li id="li02">
<span>一级菜单</span>
<ul id="ul02" class="cd" >
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li id="li03">
<span >一级菜单</span>
<ul id="ul03"class="cd" >
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<script>
function fn(canshu1,canshu2){
var li01 = document.getElementById(canshu1);
var ul01 = document.getElementById(canshu2); li01.onmouseover = function(){
ul01.style.display = "block"
}
li01.onmouseout = function(){
ul01.style.display = "none"
}
}
fn("li01","ul01")
fn("li02","ul02")
fn("li03","ul03")
</script>
</body>
</html>
最新文章
- mac osx 上面部署Django项目 apache+mysql+mod_wsgi
- centos6虚拟机复制后修改网卡
- O2O迈进智能时代 百度构建“服务生态”
- SharePoint 2013 初始化Ribbon选中Tab
- docker和shipyard使用问题
- 手机注册获取验证码的PHP代码
- mssql手工注入及绕过术
- BFC and Haslayout
- 为Asp.net MVC中的RenderSection设置默认内容
- 核反应堆[HDU2085]
- VB连接Mysql数据库
- [带你飞]一小时带你学会Python
- 20151226--easyUI
- Linux磁盘分区-rpm-yum
- sequence测试中的使用
- access数据库 配置路径
- vue.js个人学习心得
- OC 设计模式
- Android开发5——文件读写
- props设置state误区
热门文章
- white-space
- 32 | 为什么还有kill不掉的语句?
- 递归函数返回值 undefined
- Gluon学习03-基础数据类型Ndarray
- Python3 内置http.client,urllib.request及三方库requests发送请求对比
- python常用函数2
- 【Python代码】随机抽取文件名列表NameList中的Name作为训练集
- 深入理解JVM虚拟机1:JVM内存的结构与永久代的消失
- 关于long_query_time的设置,可不可以说是mysql的一个小小bug呢
- 阿里云服务器发送邮件:Connection could not be established with host smtp.qq.com [Connection timed out #110]