javascript - 使用 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;
}

Demo

如您所见，在我的 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;
}

Demo

使用 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();
});

Demo