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：第一个孩子为此工作，但到目前为止我还没有发现任何有用的东西。我做错了什么？

非常感谢任何帮助。谢谢大家！

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

Answer 2

只要您拥有正确的脚本，<li>item</li>或<li><a href=#">item</a></li>都无关紧要。

当我查看您的脚本时，您触发的操作是将“活动”类添加到所有第二/第三级。

我已经更新了脚本，现在它只相应地将类添加到第二级/第三级。

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

<强> DEMO

使用div创建一个JQuery下拉菜单

2 个答案: