Html 带有子菜单的垂直导航，每个级别都有图像上下链接，在选定页面上突出显示活动链接

我已经完成了以下css垂直导航菜单。主类别30px高翻滚时有上下图像，25px高翻滚时菜单第二级和第三级翻滚时有单独的上下图像

对于每个级别，如果没有连续的类别，则会有不同类型的上下图像

它工作正常，除了3个方面，我已经挣扎了几天，似乎看不出我哪里出了问题

第一个是由于某种原因，每个级别的文本变得越来越小，第二个是在第三个级别，所有图像显示为上下图像，好像有一个连续的类别，最后但并非最不重要的是，当在第一个、第二个或第三个类别中选择一个类别时，我似乎找不到一种方法来突出显示这些链接以向用户显示它们在该区域

我希望有人能明白这一点，因为我已经疯狂了好几天了。提前谢谢

请在下面找到当前代码（在我描述了图像的用途的图像区域中，了解我使用的图像）：

HTML:

        <div id="nav">
            <ul class="menu">
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>
        </div>

#nav {
    float:left;
    width:200px;
    z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
    display:block;
    width:200px;
    margin:0;
    padding:0;
    list-style-type: none;
}
#nav ul.menu > li {
    float: left;
    display:block;
    width:200px;
    height:30px;
    font-size:0.9em;
    line-height:2.2em;
    margin-bottom:1px;
}

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
    float: left;
    display:block;
    width:200px;
    height:25px;
    font-size:0.7em;
    line-height:2.2em;
}

#nav li a {
    display:block;
    width:200px;
    color:#FFF;
    text-decoration:none;
    font-weight:bold;
    text-transform:uppercase;
    list-style-type:none;
}

#nav ul.menu > li > a {
    background: transparent url('../../parent-category-with-submenus.png');
    display:block;
    width:200px;
    height:30px;
    margin-bottom:1px;
}

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
    background: transparent url('../../second-third-categories-with-submenus.png');
    display:block;
    width:200px;
    height:25px;
    margin-bottom:3px;
}

#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
    background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
    display:block;
    width:200px;
    height:25px;
    margin-bottom:3px;
}

#nav ul.menu ul ul li {
    float: none;
    list-style-type: none;
}
#nav li > ul {
    display: none;
    list-style-type: none;
}
#nav li:hover > ul {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:0px;
    margin-left:192px;
}
#nav li:hover > ul.sub-menu  {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:-40px;
    margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu  {
    position: absolute;
    display:block;
    width:200px;
    padding:0;
    margin-top:-30px;
    margin-left:198px;
}

问题#1:子菜单中的文本变小，因为您有此规则

#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
    ...
    font-size:0.7em;
    ...
}

而第一级项目的默认值为

#nav ul.menu > li {
    ...
    font-size:0.9em;
    ...
}

删除子菜单的字体大小标记，或将值设置为

inherit

第2期

我无法测试这一点，因为我没有您的图像，所以我不确定这是否是导致问题的原因，但您似乎缺少此CSS规则选择器末尾的

>a

#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
    background: transparent url('../../second-third-categories-with-submenus.png');
    ...
}

第三期

要突出显示菜单项，您只需在悬停状态下设置背景色，当用户浏览子菜单时，它们将保持突出显示

#nav ul li:hover{
    background:red;
}

---

字体大小

您使用的是

em

s，因此字体大小变小。

em

是一个相对单位。如果您的基本字体大小是

20px

，并且您使用的是

0.75em

，则其父元素使用基本20px字体大小的子元素的字体大小将是

15px

（20x0.75=15）。现在，该子代（孙子）的子代将以该子代的字体大小

15px

开始，其字体大小将为

11.25px

（15x0.75=11.25）。我在下面的jsFiddle中将所有

li

的文本设置为16px

上下图像

我没有费心去弄清楚这个问题的确切原因，但是在CSS的这一部分中确实有很多kruft。我会在

li

中添加一个类，其中包含一个子菜单。类似于

的东西有子菜单

。然后以锚定标记为目标，如so

.menu>。has sub-menu>a

和

.sub-menu>。has sub-menu>a

。另请参见下面的jsFiddle

HTML

导航突出显示

除非您为每个

li

或锚定标记添加一个类，否则无法使用CSS完成此操作。沿着页面名称的线条添加内容，然后在每个页面上添加相同或相似名称的body类

HTML

在上面的示例中，我们正在查看

产品

页面。对于

about

页面，可以将body标签上的类替换为

about

。最后，这不必添加到body标记中，而是添加一些其他的祖先元素。但是body标记是一个很好的干净解决方案，有助于确保类将被封装在另一个类中

然后你可以用你的CSS像这样定位链接

CSS

/*非活动*/
#李海军{
颜色：白色；
背景色：红色；
}
/*活跃的*/
.产品,产品,，
.关于.关于{
颜色：红色；
背景颜色：蓝色；
}

如果上面的内容无法实现，那么我相信您将不得不通过PHP、ASP或任何可用的服务器端语言进行一些简单的编程。您还可以使用JavaScript。您还可以通过简单的StackOverflow搜索找到答案

下面的提琴用上面的解决方案解决了所有三个问题。我还添加了一个小jQuery，这样您就可以切换并尝试导航高亮显示

---

您的问题#1答案是正确的，子菜单中的字体大小与父菜单中的相同，但我需要不同的字体大小，因此@hungerstar的上述答案更准确，但谢谢。问题2的答案是正确的！这就是我要找的。我看不见。再次感谢你。至于问题#3，问题是关于在我所在的活动页面设置背景的情况下保持链接的活动。你的建议已经在我上传的脚本中了。由于您的问题#2只回答，我只能勾选一个，因此我必须将答案标记为hungerstar。对不起，谢谢你。谢谢你的回答。关于字体大小的第1部分是正确的。我通常使用“px”，但无意中换成了“em”，而没有使下一个菜单固有。谢谢你。至于向上和向下的图像区域，如果你阅读，你会看到我已经在我上传的脚本中这样做了。下面是@koala#u dev的“问题2”。对于第三部分，您所说的方式是我将如何做，但问题是当我必须保持第二和第三个子菜单的突出显示时。但是这个想法很好，谢谢你。你三分之二，所以答案归你。谢谢

<div id="nav">
    <ul class="menu">
        <li><a href="/" title="">Home</a></li>
        <li class="has-sub-menu">
            <a href="/" title="">Home</a>
            <ul class="sub-menu">
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>
        </li>
     </ul>
</div>