导航菜单下拉列表 2级菜单_<body class="menubar-left menubar-unfold-优快云博客

本文链接：https://blog.youkuaiyun.com/zscmj/article/details/6567113

本文介绍了一个使用纯CSS实现的下拉菜单效果，包括样式设置和JavaScript交互代码，以实现鼠标悬停时显示子菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!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 id="Head1" runat="server"> <title>css菜单演示 </title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> <! -- * { margin: 0; padding: 0; border: 0; } body { font-family: arial, 宋体, serif; font-size: 12px; } #nav { line-height: 24px; list-style-type: none; background: #666; } #nav a { display: block; width: 80px; text-align: center; } #nav a:link { color: #666; text-decoration: none; } #nav a:visited { color: #666; text-decoration: none; } #nav a:hover { color: #FFF; text-decoration: none; font-weight: bold; } #nav li { float: left; width: 80px; background: #CCC; } #nav li a:hover { background: #999; } #nav li ul { line-height: 27px; list-style-type: none; text-align: left; left: -999em; width: 180px; position: absolute; } #nav li ul li { float: left; width: 180px; background: #F6F6F6; } #nav li ul a { display: block; width: 156px; text-align: left; padding-left: 24px; } #nav li ul a:link { color: #666; text-decoration: none; } #nav li ul a:visited { color: #666; text-decoration: none; } #nav li ul a:hover { color: #F3F3F3; text-decoration: none; font-weight: normal; background: #C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } -- ></style> <mce:script type="text/javascript"> <![CDATA[//>  <! // --></mce:script> </head> <body> <table width="950" height="34" border="0" align="center" cellpadding="5" cellspacing="0" background="images/menubarbg.jpg"> <tr> <td width="726" align="center" valign="middle"> <ul id="nav"> <li><a href="gywm.aspx" mce_href="gywm.aspx" target="_blank" class="amenu" style="width: 88px">关于我们 <span class="putongbai"> | </span></a> <ul> <li><a href="gywm.aspx" mce_href="gywm.aspx">·公司简介 </a></li> <li><a href="zzjg.aspx" mce_href="zzjg.aspx">·组织架构 </a></li> <li><a href="qywh.aspx" mce_href="qywh.aspx">·企业文化 </a></li> </ul> </li> <li><a href="xwdt.aspx" mce_href="xwdt.aspx" target="_blank" class="amenu" style="width: 88px">新闻动态 <span class="putongbai">| </span></a> <ul> <li><a href="xwdt.aspx" mce_href="xwdt.aspx">·公司新闻 </a></li> <li><a href="hyxw.aspx" mce_href="hyxw.aspx">·行业新闻 </a></li> </ul> </li> <li><a href="xmjsList.aspx" mce_href="xmjsList.aspx" target="_blank" class="amenu" style="width: 88px">项目介绍 <span class="putongbai">| </span></a> <ul> <li><a href="xmjsList.aspx" mce_href="xmjsList.aspx">·企业内训 </a></li> <li><a href="tyspx.aspx" mce_href="tyspx.aspx">·体验式培训 </a></li> <li><a href="glzx.aspx" mce_href="glzx.aspx">·管理咨询 </a></li> </ul> </li> <li><a href="pxmsList.aspx" mce_href="pxmsList.aspx" target="_blank" class="amenu" style="width: 88px">培训模式 <span class="putongbai">| </span></a></li> <li style="width: 91px"><a href="cgal.aspx" mce_href="cgal.aspx" target="_blank" class="amenu" style="width: 87px"> 成功案例 <span class="putongbai">| </span></a> <ul> <li><a href="cgal.aspx" mce_href="cgal.aspx">·荣誉客户 </a></li> <li><a href="bfal.aspx?" mce_href="bfal.aspx">·部分案例 </a></li> <li><a href="khpjList.aspx" mce_href="khpjList.aspx">·客户评价 </a></li> </ul> </li> <li style="width: 83px"><a href="zxnc.aspx" mce_href="zxnc.aspx" target="_blank" class="amenu" style="width: 88px"> 招贤纳才 | </a></li> <li style="width: 83px"><a href="lxwm.aspx" mce_href="lxwm.aspx" target="_blank" class="amenu" style="width: 88px;"> 联系我们 </a></li> </ul> </td> <td width="204" align="center" valign="middle" class="putongbai"> <div id="Clock" align="center" style="font-size: 12px; color: #fff" mce_style="font-size: 12px; color: #fff"> </div> </td> </tr> </table> </body> </html>