下拉菜单中的伪选择器问题

Question

我有一个 3 级下拉菜单，但我有 2 个问题：

问题 1：部分解决。请参阅下面的答案 我想用与悬停在其他选项卡上时相同的蓝色下划线颜色为活动选定标签下划线...因此，如果主页选项卡处于活动状态，它应该在主页选项卡下划线（边框底部），直到选择另一个选项卡。 ..

问题 2： 将鼠标悬停在任何子菜单项上时，它会像它应该的那样加下划线（border-bottom），但下划线（border-bottom）比父 li 标签的背景长...我如何排列它们起来了吗？

另外，当我将鼠标悬停在其子菜单项上时，如何使“服务”加下划线？

这是我的小提琴： http://jsfiddle.net/6aT9W/4/

HTML：

<div id="page-wrap">
        <ul class="dropdown">
            <li><a class="first" href="#">Home</a>
            </li>
            <li><a class="first" href="#">About Us</a>
            </li>
            <li><a class="first" href="#">Services</a>

                <ul>
                    <li>    <a href="#">Supply &amp; Distribution</a>

                        <ul>
                            <li><a href="#">Supply and distribution of industrial and raw materials including timber, machinery, equipment, fuel, technology and other resource.</a>
                            </li>
                            <li><a href="#">Supply of technological products including Information Technology and telecommunication equipment with integrated solutions.</a>
                            </li>
                        </ul>
                    </li>
                    <li>    <a href="#">Procurement &amp; Product Sourcing</a>

                        <ul>
                            <li><a href="#">Sourcing of industrial products for the industrial, energy and mining sectors.</a>
                            </li>
                        </ul>
                    </li>
                    <li>    <a href="#">Sales and Marketing</a>

                        <ul>
                            <li><a href="#">Sales, marketing and promotions including brand development strategies, research, demographic targeting.</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a class="first" href="#">Products</a>

                <ul>
                    <li><a>Caskets</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

CSS：

* {
    margin: 0;
    padding: 0;
}
#page-wrap {
    width: 800px;
    margin: 25px auto;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
p {
    margin: 15px 0;
}
/*
    BODY
*/
 #page-wrap {
    margin: 0 auto;
    width: 940px;
    height: 86px;
    border-bottom: 1px solid #bbb;
}
/* 
    LEVEL ONE
*/
 ul.dropdown {
    position: relative;
}
ul.dropdown li {
    font-weight: bold;
    float: left;
    zoom: 1;
}
ul.dropdown a:hover {
    color: #000;
}
ul.dropdown li.active a {
    color: #ffa500;
}
ul.dropdown li a {
    display: block;
    padding: 29px 8px;
    color: #222;
    font- size: 18px;
    font-family:'Open Sans', Sans-Serif;
    border-bottom: 6px solid transparent;
}
ul.dropdown li:last-child a {
    border-right: none;
}
/* Doesn't work in IE */
 ul.dropdown li.hover, ul.dropdown li:hover {
    background: #f1f1f1;
    color: black;
    position: relative;
}
ul.dropdown li.hover > a, ul.dropdown li > a:hover {
    color: black;
    border-bottom: 6px solid #003399;
}
/* 
    LEVEL TWO
*/
 ul.dropdown ul {
    width: 230px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}
ul.dropdown ul li {
    background: #fafafa;
    font-weight: normal;
    color: #000;
    float: none;
    border-bottom: 1px solid #ccc;
}
/* IE 6 & 7 Needs Inline Block */
 ul.dropdown ul li a {
    border-bottom: 6px solid transparent;
    border-right: none;
    width: 100%;
    display: inline-block;
    padding: 8px 8px;
    font-size: 14px;
}
/* 
    LEVEL THREE
*/
 ul.dropdown ul ul {
    left: 100%;
    top: 0;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}

谢谢

Answer 1

好的，我通过添加以下JS和CSS找到了活动标签问题的解决方案：

ul.dropdown li.active a{ 
                          color: #000; 
                          border-bottom: 6px solid #003399; 
                          background: #f1f1f1;
}

JS

$(document).ready(function(){
    $('.dropdown > li').click(function() {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
});

但是，一个问题仍然存在：单击“服务”时，所有子菜单也都带有下划线。我只想要悬停在下划线和突出显示的那个（对于子菜单...）

我猜它与 .siblings JQuery 方法有关...

我更新了我的 JFiddle

Answer 2

1. 您需要更改标记或添加点击处理程序来切换类。我看到你定义了 li.active 类。如果它是每个菜单项的单独页面/url/请求，请让服务器确定将.active 类添加到哪个顶级菜单。如果您正在对页面内容进行 AJAX 处理，则应挂钩 ajax 调用以在正确的选项卡上切换类（并将其从其他选项卡中删除）。如果它是单页内容（即一次性加载所有内容，并且只需 js/jquery/dhtml'ing 适当的选项卡显示在下面），那就是放置钩子的地方。

2. 这很棘手...它与a 元素上的width: 100% 规则有关。如果你把它缩小，你可以看到边界没有溢出那么糟糕。我不建议滚动，因为百分比是......不好依赖。我没有看到任何设置包含 li 的宽度的东西，所以盒子模型可能会变得混乱。

啊，我知道现在你有这个规则了

ul.dropdown ul {
  width: 230px;

结合a的内边距

ul.dropdown ul li a {
    border-bottom: 6px solid transparent;
    border-right: none;
    width: 100%;
    display: inline-block;
    padding: 8px 8px;

它将内部宽度设置为 230px（包含 li 的 100%，即包含 ul 的 100%），然后添加左右 8px 的填充，使其边框跨越的总宽度为 246px，这不适合。所以将宽度更改为 214px，+ 8px padding left + 8px padding right = 230px。

3 更改悬停选择器。使用li:hover > a 选择器而不是li > a:hover

ul.dropdown li.hover > a, ul.dropdown li:hover > a {
    color: black;
    border-bottom: 6px solid #003399;
}

更新：区别。

li:hover > a 匹配悬停在 li 元素内的任何锚标记。由于服务和产品li 包含嵌套的ul，其中a，当您将鼠标悬停在其子元素上时，外部li 仍然悬停在其上。并且服务和产品文本本身就是锚点，因此它们符合规则并获得边框。

更新了这些变化的小提琴（你的 javascript 没有变化，如果你告诉我你打算如何将内容放在菜单项的页面上，我可以更好地解决这个问题）：http://jsfiddle.net/6aT9W/5/