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

Question

我有以下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>

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

删除子菜单的字体大小decalaration或将值设置为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');
    ...
}

问题＃3

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

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

Answer 2

字体大小

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

上下图像

我没有费心去弄清楚这个问题的确切问题，但你在CSS的这一部分确实有很多kruft。 我会在li中添加一个类，其中包含一个子菜单。 像.has-sub-menu这样的东西。 然后像这样定位锚标签.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/