活动或当前时突出显示父子导航菜单答案

【问题标题】：Highlight parent and child navigation menu when active or current活动或当前时突出显示父子导航菜单
【发布时间】：2012-10-28 00:37:54
【问题描述】：

有人会告诉我如何在活动或当前时突出显示父子导航菜单。选择子页面时是否可以突出显示父菜单项。我想要实现的是类似于http://www.brotfabrik-berlin.de/ 当您将鼠标悬停到父页面不断突出显示的子页面时。谢谢。

#menu {
font-weight:700;
list-style:none;
width:990px;
margin:0px auto 0px auto;
height:29px;
padding:0px 0px 0px 0px;

/* Rounded Corners */

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #, #);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:0px;
margin-top:0px;
border:none;
z-index: 1;

#menu li:hover {
border: 1px solid #777777;
padding: 2px 4px 4px 4px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;

#menu li a {
font-family:Arial Narrow;
font-size:15px; 
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 0px 0px 0px #000;

#menu li:hover a {
color:#161616;
text-shadow: 0px 0px 0px #ffffff;

【问题讨论】：

在点击“发布”之前，您是否在预览中查看了您的问题？还是在发布后显示？发帖时，看一眼右侧的如何格式化框不会花费太多时间。（当您意识到需要时，您可以编辑您的问题。）（编辑：Kush 很乐意为您修复它，然后我批准了编辑；看起来它甚至不是有效的 CSS。）另外：你尝试了什么？你被困在哪里了？只是在网站上扔一堆 CSS 并说你想知道如何去做并没有太多的努力。
如果我错了，请纠正我，但我的理解是，如果已经存在标准，新代码不再需要特定于供应商的-moz- 和-webkit-？有什么理由继续使用供应商特定标签？
@kush：这完全取决于属性，以及目标浏览器的支持。

标签： html css highlight

【解决方案1】：

我通常会通过将current 类添加到导航链接的<li> 来实现这一点。因此，如果您正在查看home.html，导航代码将如下所示：

<ul id="menu">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Another page</a></li>
</ul>

然后我会使用链接的悬停样式设置当前类的样式，或者您可以定义不同的样式，例如：

#menu li.current a {
    font-weight: bold;
}

如果<li> 包含一个子菜单（另一个<ul>），我会像这样定位CSS：

#menu > li > a {
    /* this would target the parent link */
}

我会做的目标子菜单链接：

#menu ul ul a {
    /* this would target submenu links */
}

【讨论】：

感谢克里斯的帮助。