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

标签 html css drop-down-menu menu submenu

我已经完成了以下 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;
}

最佳答案

字体大小

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

向上和向下图像

我没有费心弄清楚这个问题的具体问题，但您的 CSS 的这一部分确实有很多废话。我会向 li 添加一个类，其中有一个子菜单。像 .has-sub-menu 这样的东西。然后定位 anchor 标记，如 .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 或 anchor 标记添加一个类，否则无法使用 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 搜索找到此问题的答案。

下面的 fiddle 解决了上述解决方案的所有三个问题。我还添加了一点 jQuery，这样您就可以退出并尝试突出显示导航。

http://jsfiddle.net/u2V8v/

关于html - 带有子菜单的垂直导航，每个级别的图像向上和向下链接，在选定页面上时事件链接突出显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18093493/

上一篇：css - 不能适本地放置标题 Div

下一篇：html - 如何将这些页脚 a 居中？

相关文章：

jquery - 编辑 CSS 以消除列末尾的边距

javascript - 循环下拉选项并使用 jquery 读取其属性

javascript - 一次仅打开一个 Bootstrap 下拉菜单

javascript - 顶部栏中的基础下拉菜单有问题

html固定宽度和动态布局

javascript - 我可以在 javascript 函数中使用 scriplet 吗？

javascript - javascript 语句中的 Php 语句

asp.net-mvc - 使用 CSS 时如何使用 Action Link

html - 使用 css 自定义单选按钮

javascript - 是否可以在外部浏览器中注入(inject) CSS？

©2024 IT工具网  联系我们