我一直在尝试在相关页面上激活我的subnav并且已经拖网论坛等数天/周！我是CSS的新手，非常感谢任何帮助！ 我设法用＃current激活顶部导航按钮，但是subnav没有跟随。我知道我可能错过了一些非常基本的东西，但我只是不明白！我希望它以类似于www.forbes.com的方式工作（通过另一个人的问题看到这个问题，我认为我太近了!!） 任何帮助都会很棒。 谢谢 丽贝卡
请参阅下面的CSS .....
<style>
ul#topnav {
margin: 0 ; padding: 0 ;
float: left;
width: 955;
list-style: none;
position: relative;
font-size: 12px;
background: url(images/testbut.jpg) repeat-x;
}
ul#topnav :hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color: #CCCCCC;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ffffff; /*--Divider for each parent level links--*/
}
ul#topnav li a {
padding: 10px 27.5px;
display: block;
color: #f0f0f0;
background-image: url(images/testbut.jpg) repeat-x;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul#topnav li span {
float: left;
padding: 10px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
color: #fff;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; background: #6a6a6a url() repeat-x;} /*--Show subnav on hover--*/
ul#topnav li span a { display: inline;}
ul#topnav li span a:hover { font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul#topnav a#current { background: #6a6a6a url() repeat-x;}
</style>
答案 0 :(得分：2)
我不太确定从现有代码开始的位置，所以相反，我从头开始整理了一个工作样本。请注意，提供的示例非常基本，只是实现既定目标的一种方式。我在Firefox 3.6上测试过，没有别的。可能存在跨浏览器兼容性问题，尤其是Internet Explorer中的:hover伪类。这段代码背后的想法只是为您提供一个简单的框架，可以使用它。
我强烈建议您查看以下文章，因为它们解释了嵌套列表的使用，跨浏览器兼容性的问题，:hover伪类IE问题的Javascript解决方案以及隐藏的可访问性问题元素使用display: none：
Suckerfish下拉列表
http://www.alistapart.com/articles/dropdowns
Suckerfish下降儿子 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充满了评论，因此理解起来应该相当简单。我认为最难的部分是使格式正确，并使子菜单水平而不是垂直。你已经掌握了这一点，所以剩下的应该很简单：
/*
* 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;
}
答案 1 :(得分：0)
如果您使用的是静态页面，请在HTML
中为链接/列表项设置一个活动类示例：
的index.html
<ul>
<li class="active">Home page</li>
<li>Content Page</li>
<li>Contact Page</li>
</ul>
content.html
<ul>
<li>Home page</li>
<li class="active">Content Page</li>
<li>Contact Page</li>
</ul>
li{color: black;}
.active{color: red;}
如果你想让subnav处于活动状态，那么只需要在ul上设置类：
<ul>
<li>
<ul class="active">
<li class="active"></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li class="active"></li>
<li></li>
</ul>
</li>
</ul>
但是如果你想要一个动态导航，它会变得有点棘手，但是对于某些PHP来说很简单。