纯CSS菜单

最新推荐文章于 2023-12-28 18:29:15 发布

everg

最新推荐文章于 2023-12-28 18:29:15 发布

阅读量355

点赞数

文章标签： css ie xhtml border float table

<!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 dt a {

/*display:block;*/

}

/*导航样式*/

.nav ul {

list-style-type:none;

margin:0;

padding:0;

}

.nav ul li{

float:left;

line-height:24px;

display:block;



padding:0;

margin:0;

width:80px;

}

.nav ul li a{

display:block;

width:80px;

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 dl{

display:none;

width:200px;

height:20px;

}

.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {

color:#555;

background-color:#f1f1f1;

display:block;

}

.nav ul li:hover dl,.nav ul li a:hover dl,.nav ul li a:active dl {

display:block;

width:100%; 

}

.nav ul dl dt{

display:block;

width:100%;

border:none;

}

.nav ul dl dt a{

display:block;

color:blue;

border:none;

}

</style>



</head>  



<body>  

<div class="nav">

<ul>

  <li><a href="####">首页</a>

   </li>

  <li><a href="####">导航2

<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>

   <dl>

    <dt><a href="####">222221</a></dt>

    <dt><a href="####">222221</a></dt>

    <dt><a href="####">222221</a></dt>

</dl>

</td></tr></table><!--[if lte IE 6]></a><![endif]-->

</li>

<li><a href="####">导航3

<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>

    <dl>

    <dt><a href="####">333331</a></dt>

    <dt><a href="####">333331</a></dt>

    <dt><a href="####">333331</a></dt>

    </dl>

</td></tr></table><!--[if lte IE 6]></a><![endif]-->

</li>

<li><a href="####">导航4

<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>

    <dl>

    <dt><a href="####">444441</a></dt>

    <dt><a href="####">444441</a></dt>

    <dt><a href="####">444441</a></dt>

    </dl>

</td></tr></table><!--[if lte IE 6]></a><![endif]-->

</li>

<li><a href="####">导航5

<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>

    <dl>

    <dt><a href="####">555551</a></dt>

    <dt><a href="####">555551</a></dt>

    <dt><a href="####">555551</a></dt>

    </dl>

</td></tr></table><!--[if lte IE 6]></a><![endif]-->

</li>

<li><a href="####">导航6

<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>

    <dl>

    <dt><a href="####">666661</a></dt>

    <dt><a href="####">666661</a></dt>

    <dt><a href="####">666661</a></dt>

    </dl>

</td></tr></table><!--[if lte IE 6]></a><![endif]-->

</li>

</ul>

</div>

</body>  

</html>

everg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS菜单

纯CSS菜单 /*基本信息*/* {font-family:"宋体";margin:0;padding:0;}body {padding:15px;}/**/.nav li dt a {/*display:block;*/}/*导航样式*/
复制链接

扫一扫