css下拉菜单

最新推荐文章于 2026-01-03 21:59:22 发布

原创最新推荐文章于 2026-01-03 21:59:22 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #table #xhtml #html #border

Html+Css 专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何使用HTML和CSS创建一个具有多级下拉菜单的导航栏。该导航栏包括了公司介绍、新闻、产品展示等多个分类，并为每个分类提供了详细的子项链接。

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css下拉菜单</title> <style type="text/css"> <!-- body { margin:20px 0 0 0; font-family: arial, 宋体, serif; font-size:12px; }

.top { margin:0px; padding:0px; width:1002px; height:31px; text-align:center; }

.lie{ list-style-type:none; margin:0px; padding:0px; }

.lie li{ float:left; height:31px; width:100px;}

.heng1{ display:block; line-height:31px; height:31px; width:100px; color:#fff; background-image: url(images/bg_menu.gif); text-decoration:none; position:relative; overflow:hidden; }

.heng1:hover{ color:#fff; background-image: url(images/bg_menuon.gif); overflow:visible; }

.heng1 span{ margin:0; padding:0; position:absolute; left:0px; top:31px; width:100px; }

.heng1 span table{ margin:0px; padding:0px; width:100px; } .heng1 span table a{ width:100px; text-decoration:none; display:block; color:#000; }

.heng1 span table a:hover{font-weight:bold;color:#f00;background-color:#ffe;}

.heng1 span table ul,.heng1 span table li{ margin:0px; padding:0px; list-style:none; } .heng1 span table li{ border:1px solid #999; display:block; margin:0 0 2px 0; } --> </style> </head> <body> <div class="top"> <ul class="lie"> <li><a href="index.asp" _fcksavedurl=""index.asp"" class="heng1">网站首页</a></li> <li><a href="about.asp" class="heng1">公司简介 <span> <table><tr><td>

<li><a href="news.asp" class="heng1">新闻中心 <span> <table><tr><td> <ul> <li><a href="news_list.asp?ArtClassID=1">公司新闻</a></li> <li><a href="news_list.asp?ArtClassID=1">行业新闻</a></li> </ul> </td></tr></table> </span> </a></li> <li><a href="product.asp" class="heng1">产品展示 <span> <table><tr><td> <ul> <li><a href="Product.asp?PicClassID=1">最新监控产品</a></li>

<li><a href="Product.asp?PicClassID=111">CCTV闭路监控</a></li> <li><a href="Product.asp?PicClassID=4">三监电子监控</a></li> <li><a href="Product.asp?PicClassID=5">大华监控系列</a></li> <li><a href="Product.asp?PicClassID=20">海康威视系列</a></li> <li><a href="Product.asp?PicClassID=38">防盗报警器材</a></li> <li><a href="Product.asp?PicClassID=39">霍尼威尔器材</a></li> <li><a href="Product.asp?PicClassID=42">枫叶防盗器材</a></li> <li><a href="Product.asp?PicClassID=102">希捷DVR硬盘</a></li> </ul>

</td></tr></table> </span> </a></li> <li><a href="jishu.asp" class="heng1">技术服务</a></li> <li><a href="works.asp" class="heng1">应用实例</a></li> <li><a href="downloads.asp" class="heng1">文件下载 <span> <table><tr><td> <ul> <li><a href="downloads.asp?SoftClassID=1">说明资料</a></li> <li><a href="downloads.asp?SoftClassID=3">价格报表</a></li> <li><a href="downloads.asp?SoftClassID=4">软件下载</a></li>

</a></li> <li><a href="job.asp" class="heng1">招聘信息</a></li> <li><a href="contact.asp" class="heng1">联系我们</a></li> </ul> </div>

</body> </html>