网页主菜单，横向
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css" > *{margin:0px ;padding:0px;} .yiji{width:100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; float:left;} .yiji:hover{ background-color:#F09; color:#FFF;;} </style> </head> <body> <div style="width:500px; height:36px; border:1px solid #60F; margin:0px auto;"> <div class="yiji" onmouseover="xianshi('erji1')" onmouseout="yincang('erji1')" >首页</div> <div id="erji1" style=" float:left; width:0px; display:none;"> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">首页1</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">首页2</div> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">首页3</div> </div> <div class="yiji" onmouseover="xianshi('erji2')" onmouseout="yincang('erji2')">产品中心</div> <div id="erji2" style=" float:left; width:0px; display:none;"> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心1</div> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心2</div> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心3</div> </div> <div class="yiji" onmouseover="xianshi('erji3')" onmouseout="yincang('erji3')">活动中心</div> <div id="erji3" style=" float:left; width:0px; display:none;"> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">活动中心1</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">活动中心2</div> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px;background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">活动中心3</div> </div> <div class="yiji" onmouseover="xianshi('erji4')" onmouseout="yincang('erji4')">联系我们</div> <div id="erji4" style=" float:left; width:0px; display:none;"> <div style="width:100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">联系我们1</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">联系我们2</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px;background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">联系我们3</div> </div> <div class="yiji" onmouseover="xianshi('erji5')" onmouseout="yincang('erji5')">邮箱</div> <div id="erji5" style=" float:left; width:0px; display:none;" > <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">邮箱1</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">邮箱2</div> <div style="width:100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">邮箱3</div> </div> </div> </body> <script type="text/javascript"> function xianshi(d) { var erji=document.getElementById(d); erji.style.display="block"; } function yincang(d) { var erji=document.getElementById(d); erji.style.display="none"; } </script> </html>
鼠标放上会拉伸，鼠标拿走会收起来
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？