Question

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

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

问题2： 当鼠标悬停在任何子菜单项上时，它会像它应该的那样加下划线（边框底部），但下划线（边框底部）比父标签的背景更长...如何排列它们吗？

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

这是我的好消息： 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

您需要更改标记或添加单击处理程序以切换该类。我看到你定义了li.active类。如果它是针对每个菜单项的单独页面/网址/请求，请让服务器确定要将.active类添加到哪个顶级菜单。如果你是AJAXing页面内容，你应该挂钩到ajax调用，在正确的选项卡上切换类（并将其从其他选项中删除）。如果它是单页内容（即一次性加载，只是js / jquery / dhtml'下面显示的相应标签），那就是放置钩子的地方。
这很棘手......它与width: 100%元素上的a规则有关。如果你缩小它，你可以看到边框没有溢出那么糟糕。我不建议滚动，因为百分比......不好依赖。我没有看到任何设置包含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填充左+ 8px填充右= 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元素内的任何锚标记。自服务＆amp;产品li包含其中包含ul的嵌套a，当您将鼠标悬停在其子元素上时，外部li仍在悬停。和服务＆amp;产品文本本身就是锚点，因此它们符合规则并获得边界。

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

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

2 个答案: