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

Question

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

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

问题 2:将鼠标悬停在任何子菜单项上时，它会按应有的方式加下划线(border-bottom)，但下划线(border-bottom)比父 li 标签的背景长...我如何排列它们起来？

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

这是我的 fiddle : 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