纯CSS完成超简易的2级往下拉导航栏菜单编码

日期:2021-03-04 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

本文案例讲述了纯CSS完成超简易的2级往下拉导航栏菜单编码。共享给大伙儿供大伙儿参照。实际以下:

这是1款纯CSS菜单,2级往下拉导航栏实际效果,是最简约的CSS导航栏菜单,适配性也很棒,IE7/8、火狐等都适用,并且它還是学习培训CSS菜单撰写的典型实例教程,让你学会许多CSS技能。

运作实际效果截图以下:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css-simple⑵l-show-nav-menu-codes/

实际编码以下:


拷贝编码
编码以下:
<!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=GB2312" />
<title>纯CSS菜单</title>
<style type="text/css">
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}
.nav li li a {display:inline-block;}
.nav li li a {display:block;}
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;}
.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav ul table {width:100%;border-collapse:collapse;border:0;padding:0;margin:0;}
.nav ul li ul {display:none;}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}
.nav ul ul li {display:block;width:100%;border:none;}
.nav ul ul li a{display:block;color:blue;border:none;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">主页
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">全新升级</a></li>
<li><a href="#">免费下载排行</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">ASP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">公司整站</a></li>
<li><a href="#">照片相册</a></li>
<li><a href="#">小区程序流程</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">PHP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">blog新浪微博</a></li>
<li><a href="#">论坛小区</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">JSP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">公司</a></li>
<li><a href="#">新闻系统软件</a></li>
<li><a href="#">留言</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">VC++
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">数据信息库</a></li>
<li><a href="#">页面</a></li>
<li><a href="#">数据加密</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">DELPHI
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">系统软件有关</a></li>
<li><a href="#">优化算法</a></li>
<li><a href="#">数据信息库</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>

期待本文所述对大伙儿的css网页页面设计方案有一定的协助。

上一篇:div层调剂z 返回下一篇:没有了