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

Question

我已经完成了以下 css 垂直导航菜单。父类别有 30 像素高的上下图像用于翻转，菜单翻转的第二级和第三级有单独的上下图像，高度为 25 像素。

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

它工作正常，除了我几天来一直在努力解决的 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>

CSS：

#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;
}

Answer 1

问题 #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

我无法对此进行测试，因为我没有您的图片，所以我不确定这是否是导致问题的原因，但您似乎错过了> a此 CSS 规则选择器末尾的

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

问题 #3

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

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

Answer 2

字体大小

您的字体变小了，因为您使用的是ems。Anem是一个相对单位。如果您的基本字体大小是20px并且您正在使用，0.75em那么其父使用基本 20px 字体大小的子元素的字体大小将是15px(20x0.75=15)。现在那个孩子（孙子）的孩子将从孩子的字体大小开始15px，它的字体大小将是11.25px（15x0.75=11.25）。li我在下面的 jsFiddle 中将所有文本设置为 16px 。

UP 和 DOWN 图像

我没有费心去弄清楚这个问题的确切问题，但你的CSS的这一部分确实有很多缺陷。我会添加一个类，li其中有一个子菜单。类似的东西.has-sub-menu。然后定位锚标签，如 so.menu > .has-sub-menu > a和.sub-menu > .has-sub-menu > a。另请参阅下面的 jsFiddle。

HTML

<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>

CSS

.menu > .has-sub-menu > a {
     background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
     background-image: url(img-two.png);
}

导航突出显示

li除非您为每个标签或锚标签添加一个类，否则这是无法使用 CSS 完成的。沿着页面名称的行，然后在每个页面上添加一个相同或相似名称的正文类。

HTML

<!-- your code -->
<body class="products">
     <!-- more of your code -->
     <div id="nav">
          <ul class="menu">
               <li class="products"><a href="#">Products</a></li>
               <li class="about"><a href="#">About</a></li>
               <!-- more links -->
          </ul>
          <!-- more links -->
     </div>
     <!-- more of your code -->
</body>

在上面的示例中，我们正在查看products页面。对于about页面，您可以将 body 标记上的类替换为about. 最后，这不必添加到 body 标签中，而是添加到其他一些祖先元素中。但是 body 标签是一个很好的干净的解决方案，它有助于确保类将被封装在另一个类中。

然后你可以用你的CSS来定位链接。

CSS

/* non-active */
#nav li {
     color: white;
     background-color: red;
}

/* active */
.products .products,
.about .about {
     color: red;
     background-color: blue;
}

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

下面的小提琴解决了上述解决方案的所有三个问题。我还添加了一个小 jQuery，以便您可以切换并尝试导航突出显示。

http://jsfiddle.net/u2V8v/