使用div創建JQuery下拉菜單

Question

我已經嘗試解決此問題一段時間了。 基本上，我正在創建一個包含ul的div的下拉菜單，以便我可以使用一個具有固定寬度的框，這樣我就可以在框內包含圖像。

BestBuy.com的導航菜單就是一個例子。 我真的很喜歡這個設計，但是我很難復制它。

僅當li不是鏈接時，我的CSS才能正常工作。 示例：當它是<li>Link</li>而不是<li><a href="#">Link</a></li> 。

當然，該<li>內部是另一個列表。

無論如何，我決定使用JQuery來解決此問題，而我已經完成了一半。

這是我的JQuery：

$(document).ready(function () {

    $(".navbar ul li").hover(function() {
        $(".navlink > div:first").addClass("active");
    }, function() {
        $(".navlink > div:first").removeClass("active");
    });

    $(".secondarylink").hover(function() {
        $(".secondarylink > div").addClass("active");
    }, function() {
        $(".secondarylink > div").removeClass("active");
    });

});

這是我的標記：

<div class="navbar">
  <ul>
    <li class="navlink"> <a href="#">Products</a>
      <div class="secondlevel">
        <ul>
          <li class="secondarylink"><a href="#">Testing 1</a>
            <div class="thirdlevel two-columns">
              <div class="column">
                <ul>
                  <li><a href="#">Testing 1</a> </li>
                  <li><a href="#">Testing 2</a> </li>
                  <li><a href="#">Testing 3</a> </li>
                  <li><a href="#">Testing 4</a> </li>
                </ul>
              </div>
              <div class="column">
                <ul>
                  <li><a href="#">Testing 1</a> </li>
                  <li><a href="#">Testing 2</a> </li>
                  <li><a href="#">Testing 3</a> </li>
                  <li><a href="#">Testing 4</a> </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="secondarylink"><a href="#">Testing 2</a>
            <div class="thirdlevel">
              <ul>
                <li>Testing 1</li>
                <li>Testing 2</li>
                <li>Testing 3</li>
                <li>Testing 4</li>
              </ul>
            </div>
          </li>
          <li>Testing 3</li>
          <li>Testing 4</li>
        </ul>
      </div>
    </li>
    <li class="navlink">Test Link</li>
  </ul>
</div>

和我的風格：

body {
    font-family:sans-serif;
    background: #eee;
}
.navlink {
    display:block;
}
.navbar {
    background:lightblue;
    width: 100%;
    padding:0;
}
.navbar ul {
    list-style:none;
    padding:0;
    margin:0;
}
.navbar ul>li {
    display:inline-block;
}
.navbar ul li ul>li {
    display:block;
}
.secondlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:#fff;
    padding:0;
    border: 1px solid #c3c4c4;
}
.thirdlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:lightgreen;
    left:350px;
    border: 1px solid #c3c4c4;
    top:-1px;
}
.thirdlevel.two-columns {
    width:700px;
}
.thirdlevel div:first-child {
    position:absolute;
    left:0;
}
.thirdlevel div {
    position:absolute;
    right:0;
}
.column {
    width:350px;
}
.thirdlevel {
    display:none;
}
.secondlevel {
    display:none;
}
/*
.navbar ul li:hover > div:first-child {
    display:block;
}
*/
 .active {
    display:block;
}
.hidden {
    display:none;
}
.navbar ul li a {
    display:block;
}

演示

如您所見，在我的CSS中，我有.navbar ul li:hover > div:first-child { display:block;} 。 這有效，但是沒有鏈接...有人告訴我嘗試使<a> display:block; 但這也不起作用。

我需要做的（我認為）是可以選擇div：first-child使它起作用，但是到目前為止，我還沒有發現任何可行的方法。 我究竟做錯了什么？

任何幫助是極大的贊賞。 謝謝大家！

Answer 1

我不確定您要做什么，但這也許會有所幫助。

使用CSS：

.navbar > ul > li:hover > .secondlevel {
    display: block;
}
.navbar .secondarylink:hover > .thirdlevel {
    display: block;
}

演示

使用jQuery：

$(".navbar ul li").hover(function () {
    $(this).find('.secondlevel').show();
}, function () {
    $(this).find('.secondlevel').hide();
});

$(".secondarylink").hover(function () {
    $(this).find('.thirdlevel').show();
}, function () {
    $(this).find('.thirdlevel').hide();
});

演示

Answer 2

只要您具有正確的腳本，對於<li>item</li>或<li><a href=#">item</a></li>都沒有關系。

當我查看您的腳本時，您觸發的動作是將“活動”類添加到所有第二/第三級。

我已經更新了腳本，現在只將類相應地添加到第二級/第三級。

$(this).find().addClass();

DEMO