https://www.cnblogs.com/longhai3/longhai

HTML>>纵向导航实例

Posted on   凡是过去,皆为序曲  阅读(135)  评论(0编辑  收藏  举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body { font-family:"黑体"; font-size:16px;}
ul,li{ margin:0; padding:0; list-style-type:none;}
a { color:#000; text-decoration:none;}

#tu01 {width:245px; height:130px;
background:url(subtitle.jpg) no-repeat;}
#tu01 #zi01 {
color:#FFF; font-size:24px; display:block;
padding:30px 20px; font-weight:bold;}
#menu {width:245px;
border-bottom:3px solid #ccc;}
#menu ul li {
height:40px; line-height:40px;
border-bottom:1px solid #ccc;
position:relative;}
#menu ul li a {display:block; padding:0 20px;}
#menu ul li a:hover {color:#FFF; background:#0162af;}
#menu ul li ul {
border:1px solid #ccc;
position:absolute; display:none;
width:245px; left:245px; top:0;}
#menu ul li:hover ul { display:block;}
#menu #AA{color:#CCC; float:right; font-weight:bold;}
#menu ul li a:hover span#AA{color:#FFF; background:#0162af;}
</style>
</head>
<body>
<div id="tu01"><span id="zi01">关于我们</span></div>
<div id="menu">
<ul>
<li><a href="#">公司简介<span id="AA">></span></a></li>
<li><a href="#">发展大事记<span id="AA">></span></a></li>
<li><a href="#">企业荣誉<span id="AA">></span></a></li>
<li><a href="#">企业文化<span id="AA">></span></a>
<ul>
<li><a href="#">企业愿景</a></li>
<li><a href="#">经营理念</a></li>
</ul>
</li>
<li><a href="#">厂容厂貌<span id="AA">></span></a></li>
</ul>
</div>
</body>
</html>

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)

随心,随记

https://www.cnblogs.com/w1hg/331817

点击右上角即可分享
微信分享提示