我一直在努力让我的子导航在相关页面上处于事件状态，并且已经拖网论坛等几天/几周了!我对 CSS 很陌生，非常感谢任何帮助! 我已经设法使用#current 使顶部导航按钮处于事件状态，但子导航没有跟随。我知道我可能错过了一些非常基本的东西，但我就是不明白!我希望它以与 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>
最佳答案
我不太确定从哪里开始使用您现有的代码，因此，我从头开始整理了一个工作示例。请注意，提供的示例非常基础，只是实现既定目标的一种方式。我已经在 Firefox 3.6 上测试过它，没有别的。可能存在跨浏览器兼容性问题，尤其是 Internet Explorer 中的 :hover 伪类。此代码背后的想法只是为您提供一个简单的工作框架。
我强烈建议您查看以下文章，因为它们解释了嵌套列表的使用、跨浏览器兼容性问题、:hover 伪类 IE 问题的 Javascript 解决方案，以及使用 display: none 隐藏元素的可访问性问题:
Suckerfish 下拉菜单
http://www.alistapart.com/articles/dropdowns
Son of 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 应该是相当 self 解释的。只需给事件菜单 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;
}
祝你好运!
关于css - 水平 CSS 子导航问题!，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3085712/