我不太确定从哪里开始使用您现有的代码，因此，我从头开始整理了一个工作示例。请注意，提供的示例非常基础，只是实现既定目标的一种方式。我已经在 Firefox 3.6 上对其进行了测试，仅此而已。可能存在跨浏览器兼容性问题，尤其是 Internet Explorer 中的 :hover 伪类。这段代码背后的想法只是为您提供一个简单的工作框架。
我强烈建议您查看以下文章，因为它们解释了嵌套列表的使用、跨浏览器兼容性问题、:hover 伪类 IE 问题的 Javascript 解决方案以及使用隐藏元素的可访问性问题display: none:
Suckerfish 下拉菜单
http://www.alistapart.com/articles/dropdowns
Suckerfish Dropdowns 之子
http://www.htmldog.com/articles/suckerfish/
用 CSS 隐藏：问题和解决方案
http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/
好的，进入代码。首先，HTML。在这里，我使用嵌套的无序列表来创建菜单结构。这是一个很好的方法，因为导航菜单实际上只是一个嵌套的链接列表。对于那些不使用 CSS 的用户，这将正确显示，并且屏幕阅读器可以正确阅读。
您可能希望研究从活动页面中删除链接的方法。例如，如果活动页面是第 1-3 页，您可以将a 标记替换为span 标记。
HTML 应该是相当不言自明的。只需为活动菜单 UL 提供 active 类：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<title>Horizontal Menus</title>
</head>
<body>
<div id="topnav">
<ul>
<li>Menu 1
<ul class="active">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
<li><a href="#">Page 1-4</a></li>
</ul>
</li>
<li>Menu 2
<ul>
<li><a href="#">Page 2-1</a></li>
<li><a href="#">Page 2-2</a></li>
<li><a href="#">Page 2-3</a></li>
<li><a href="#">Page 2-4</a></li>
<li><a href="#">Page 2-5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS 中充满了 cmets，所以应该很容易理解。我认为最难的部分是正确格式化，并使子菜单水平而不是垂直。你已经做到了这一点，所以剩下的应该很容易：
/*
* The contain DIV for the navigation menu.
* Use this to position the menu on the page.
*/
#topnav {
/*
* Set the containing DIV position to
* relative. This allows the UL to be
* positioned relative to this container.
* See static, relative and absolute, here:
* http://www.w3.org/TR/CSS2/visuren.html#choose-position
*/
position: relative;
}
/*
* All ULs (first and second level).
*/
#topnav ul {
/*
* Remove bullets from the UL.
*/
list-style: none;
/*
* Zero margins and padding.
*/
margin: 0;
padding: 0;
/*
* Take the UL out of the normal flows so
* that it can be given absolute positioning
* coordinates, relative to its containing
* block (the #topnav DIV).
*/
position: absolute;
/*
* Align the UL with the left of the #topnav DIV.
*/
left: 0;
/*
* The list must be wide enough to enclose all
* second level list items (5 x 10em).
*/
width: 50em;
/*
* Give the UL height and a background colour.
* This enables the UL that is activated during a
* hover to mask the UL that is active. See
* the active and hover z-index settings.
*/
height: 1.5em;
background: #eeeeee;
}
/*
* All LIs (first and second level).
*/
#topnav li {
/*
* Float the LIs left so that they all
* appear on one line.
*/
float: left;
/*
* Set the width of each LI.
*/
width: 10em;
}
/*
* Second level UL.
*/
#topnav ul ul {
/*
* Hide all second level LIs.
* Set their position to absolute, then
* move them left by 999em.
*/
position: absolute;
left: -999em;
}
/*
* Second level UL.
* Selected when first-level LI is hovered over,
* or when first-level UI has the 'active' class.
*/
#topnav ul li:hover ul, #topnav ul ul.active {
/*
* Show active LIs.
* Reset the left position to zero.
*/
left: 0;
}
/*
* Second level UL.
* Selected when first-level LI is hovered over.
*/
#topnav ul li:hover ul {
/*
* Set the stacking level (z-index) so that it is
* above the active UL.
*/
z-index: 200;
background: #cccccc;
}
/*
* Second level UL.
* Selected when first-level UI has the 'active' class.
*/
#topnav ul ul.active {
/*
* Set the stacking level (z-index) so that it is
* below the UL that is displayed during hover.
*/
z-index: 100;
background: #aaaaaa;
}
祝你好运！