1

I have a 3-level drop down menu and I have 2 issues:

Issue 1: Partly solved. See my answer below I would like to underline the active selected tag the same blue underline color as when hovering over the other tabs... So if the home page tab is active, it should underline(border-bottom) the home tab until another one is selected...

Issue 2: When hovering over the any of the sub-menu items, it underlines(border-bottom) it like it should, but the underline(border-bottom) is longer than the background of the parent li tag...How do I line them up?

Also, how can I keep 'Services' underlined when I am hovering over its sub-menu items?

HERE IS MY 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;
}

Thank You

4

2 回答 2

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

于 2013-01-29T21:16:37.550 回答
1

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

  2. 这很棘手......它与元素的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悬停在元素上的任何锚标记。由于 Services & Productsli包含其中的嵌套ul，因此当您将鼠标悬停在其子元素上时a，外部仍将悬停在其上。li服务和产品文本本身就是锚点，因此它们符合规则并获得边框。

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

于 2013-01-29T21:27:36.517 回答