导航表单改进版
2016-06-24 21:24
337 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav a {
font-size: 18px;
color: #C63;
text-decoration: none;
display: block;
width: 140px;
padding: 6px 10px 4px;
border: 1px solid #33CC99;
}
#nav a:hover {
color: #F00;
background-color: #000;
}
.b {
display: none;//未点击时不显示
border: solid 1px #000000;
}
#nav a:hover .b { //用子类,伪类选择器
display: block;
position: absolute;
top: 9.5px;
left: 170px;
}
</style>
<title>制作数值导航菜单</title>
</head>
<body>
<div id="nav"> <a href="" style="text-align:center">首页
<div class="b">
<table border="1" width="200" >
<tr>
<td> 中心简介 </td>
<td> 政策法规 </td>
</tr>
<tr>
<td> 中心简介 </td>
<td> 常用下载 </td>
</tr>
<tr>
<td> 中心简介 </td>
<td> 政策法规 </td>
</tr>
</table>
</div>
</a> <a href="" style="text-align:center">中心简介</a> <a href="" style="text-align:center">政策法规</a> <a href="" style="text-align:center">中心简介</a> <a href="" style="text-align:center">常用下载</a> <a href="" style="text-align:center">技术支持和服务</a> </div>
</body>
</html>
运行结果:
![](https://img-blog.csdn.net/20160624212516862?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
当鼠标移到“首页”时:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav a {
font-size: 18px;
color: #C63;
text-decoration: none;
display: block;
width: 140px;
padding: 6px 10px 4px;
border: 1px solid #33CC99;
}
#nav a:hover {
color: #F00;
background-color: #000;
}
.b {
display: none;//未点击时不显示
border: solid 1px #000000;
}
#nav a:hover .b { //用子类,伪类选择器
display: block;
position: absolute;
top: 9.5px;
left: 170px;
}
</style>
<title>制作数值导航菜单</title>
</head>
<body>
<div id="nav"> <a href="" style="text-align:center">首页
<div class="b">
<table border="1" width="200" >
<tr>
<td> 中心简介 </td>
<td> 政策法规 </td>
</tr>
<tr>
<td> 中心简介 </td>
<td> 常用下载 </td>
</tr>
<tr>
<td> 中心简介 </td>
<td> 政策法规 </td>
</tr>
</table>
</div>
</a> <a href="" style="text-align:center">中心简介</a> <a href="" style="text-align:center">政策法规</a> <a href="" style="text-align:center">中心简介</a> <a href="" style="text-align:center">常用下载</a> <a href="" style="text-align:center">技术支持和服务</a> </div>
</body>
</html>
运行结果:
当鼠标移到“首页”时:
相关文章推荐
- Hash表和Hash冲突
- 获取注解的值
- Java学习(1)
- 机器学习系列:(十)从感知器到人工神经网络
- SUSAN角点检测
- 软件工程学期总结
- ssh整合是Caused by: java.io.FileNotFoundException: class path resource [bean/test/User.hbm.xml] cannot
- 提高项目9-歌手大奖赛计分系列1
- ios导航栏按钮的小问题
- 每天一个Linux命令(10)--cat命令
- OpenMP Windows/macOS 配置指南
- battery
- 备用交换机 割点
- 一对多的分页查询
- gdb-打开gdb的命令历史功能
- java解析XML文件
- 第一篇博客,线性表插入数据。
- 5.dup和dup2和fcntrl及标准IO
- ios条件预编译的例子【一二】
- Android初级教程理论知识(第十章Fragment与动画)