下拉列表
来源：互联网 发布：mysql 需要.net吗 编辑：程序博客网 时间：2024/05/18 02:01
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表</title>
<style type="text/css">
*{ margin:0px;
padding:0px;
}
body{
font-size:13px;
}
#nav{ width:850px;
height:40px;
background-color:#eee;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
width:70px;
}
a{
text-decoration:none;
color:#000;
display:block;
}
a:hover{
color:#F00;
background-color:#666;
}
ul li ul li{ float:none;
background-color:#eee;
margin:2px 0px;
}
ul li ul{
display:none;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) { //显示子菜单
var subMenu = li.getElementsByTagName("ul")[0]; //获取li下面的ul 将ul的样式设为block 块
subMenu.style.display = "block";
}
function hideSubMenu(li) { //隐藏子菜单
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none"; //将子菜单的样式设为隐藏
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#"><span class="leftspan"></span>关于中信<span class="rightspan"></span></a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">集团领导</a></li>
<li><a href="#">领导题词</a></li>
<li><a href="#">业务回顾</a></li>
<li><a href="#"> 公司历史</a></li>
<li><a href="#">中信风格</a></li>
<li><a href="#"> 公司年报</a></li>
<li><a href="#">公司要问</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">公司业务</a>
<ul>
<li><a href="#">金融</a></li>
<li><a href="#">非金融</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">益事业</a>
<ul>
<li><a href="#">扶贫</a></li>
<li><a href="#">绿化</a></li>
<li><a href="#">援藏</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">中信研究</a>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">推荐招聘</a>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">特色推荐</a>
<ul>
<li><a href="#">网络研究</a></li>
<li><a href="#">中信出版</a></li>
<li><a href="#">会展服务</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">关于我们</a>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表</title>
<style type="text/css">
*{ margin:0px;
padding:0px;
}
body{
font-size:13px;
}
#nav{ width:850px;
height:40px;
background-color:#eee;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
width:70px;
}
a{
text-decoration:none;
color:#000;
display:block;
}
a:hover{
color:#F00;
background-color:#666;
}
ul li ul li{ float:none;
background-color:#eee;
margin:2px 0px;
}
ul li ul{
display:none;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) { //显示子菜单
var subMenu = li.getElementsByTagName("ul")[0]; //获取li下面的ul 将ul的样式设为block 块
subMenu.style.display = "block";
}
function hideSubMenu(li) { //隐藏子菜单
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none"; //将子菜单的样式设为隐藏
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#"><span class="leftspan"></span>关于中信<span class="rightspan"></span></a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">集团领导</a></li>
<li><a href="#">领导题词</a></li>
<li><a href="#">业务回顾</a></li>
<li><a href="#"> 公司历史</a></li>
<li><a href="#">中信风格</a></li>
<li><a href="#"> 公司年报</a></li>
<li><a href="#">公司要问</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">公司业务</a>
<ul>
<li><a href="#">金融</a></li>
<li><a href="#">非金融</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">益事业</a>
<ul>
<li><a href="#">扶贫</a></li>
<li><a href="#">绿化</a></li>
<li><a href="#">援藏</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">中信研究</a>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">推荐招聘</a>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">特色推荐</a>
<ul>
<li><a href="#">网络研究</a></li>
<li><a href="#">中信出版</a></li>
<li><a href="#">会展服务</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">关于我们</a>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
1 0
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 下拉列表
- 56民族下拉列表 民族下拉列表
- FAQ：操纵下拉列表
- 省市联动下拉列表
- 下拉列表索引
- N级联下拉列表
- 下拉列表,选左进右.
- 享元模式
- Altium Designer -- PCB设置板框
- iOS UILabel多行时文字向下偏移
- OSG + VS2008 + win7环境搭建
- 参数传递引用
- 下拉列表
- java-----NIO总结(三)
- const、volatile、mutable的用法
- hdu 1058
- JAVA中对于需要频繁new的对象的一个优化的方法
- Java的“异常”
- 关于Matlab不能启动的问题:matlab has encountered an internal problem and needs to close
- 全国车辆违章查询数据接口文档及demo
- 网易视频云：Kudu，支持快速分析的新型Hadoop存储系统
