网站导航

最新推荐文章于 2024-04-10 21:17:18 发布

露露mary

最新推荐文章于 2024-04-10 21:17:18 发布

阅读量273

点赞数 1

分类专栏：代码片段

代码片段专栏收录该内容

15 篇文章 0 订阅

订阅专栏

网站导航，包含二级导航。鼠标经过显示，鼠标离开隐藏。

<!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>导航菜单</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#nav {
width:680px;
height:38px;
background-color:#00CC99;
font-size:12px;
margin:0 auto;
margin-top:100px;
}
#clear {
clear:both;
}
ul {
list-style:none;
}
#nav li {
float:left;
}
#nav li:hover dl {
display:block;
}
#nav li a {
background-color: #000;
color: #FFF;
padding:12px 20px;
display:block;
text-decoration:none;
}
#nav li a:hover {
background-color: #f60;
}
#nav li dl {
display:none;
}
#nav li dl dd a {
background-color:#666;
color: #FFF;
}
#nav li dl dd a:hover {
background-color: #fc9;
color:#f00;
}
#nav li:hover dl {
display:block;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司介绍</a>
<dl>
<dd><a href="#">公司成员</a></dd>
<dd><a href="#">技术支持</a></dd>
<dd><a href="#">公司历史</a></dd>
<dd><a href="#">证书获得</a></dd>
<dd><a href="#">服务宗旨</a></dd>
</dl>
</li>
<li><a href="#">技术支持</a>
<dl>
<dd><a href="#">专业技术</a></dd>
<dd><a href="#">技术指导</a></dd>
<dd><a href="#">技术证书</a></dd>
<dd><a href="#">学历证明</a></dd>
</dl>
</li>
<li><a href="#">品牌推广</a>
<dl>
<dd><a href="#">自主品牌</a></dd>
<dd><a href="#">热销产品</a></dd>
<dd><a href="#">最新试销</a></dd>
<dd><a href="#">产品分类</a></dd>
<dd><a href="#">产品说明</a></dd>
<dd><a href="#">作用功效</a></dd>
<dd><a href="#">市场份额</a></dd>
</dl>
</li>
<li><a href="#">商品展示</a>
<dl>
<dd><a href="#">热卖展区</a></dd>
<dd><a href="#">各地展台</a></dd>
<dd><a href="#">功能介绍</a></dd>
<dd><a href="#">推荐产品</a></dd>
<dd><a href="#">其他功能</a></dd>
</dl>
</li>
<li><a href="#">成功案例</a>
<dl>
<dd><a href="#">广西案例</a></dd>
<dd><a href="#">上海案例</a></dd>
<dd><a href="#">成都案例</a></dd>
<dd><a href="#">新疆案例</a></dd>
<dd><a href="#">北京案例</a></dd>
</dl>
</li>
<li><a href="#">客户服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div id="clear"></div>
</div>
</body>
</html>