Drop down menu JQuery Lava Lamp下拉列表被幻灯片覆盖，在调整浏览器大小时位置更改不正确

所以在解决了这个导航的一系列其他问题之后。我还有两个小问题

第一个更重要的问题是，当下拉列表下降时，它会被包含的div（网格的一部分）切断。相反，它需要“浮动”在这个网格之外，并在下面的幻灯片上。不知道怎么做。看到问题了吗

我特意将高度设为50px以显示问题，如果没有高度，或者高度设置为自动，则下拉列表甚至不会显示

下面是一段代码片段

<div class="row">
        <div class="grid_4">
            <img src="<?php bloginfo('template_directory'); ?>/images/logo.png">
        </div>
        <div class="grid_8">
            <?php wp_nav_menu( array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>', 'container_class' => 'menu', 'menu_class' => 'nav', 'menu' => 'Header', 'walker' => new UL_Class_Walker )); ?>
        </div>
    </div>

因此，当网页加载时，效果很好，但当您调整窗口大小时，“魔线”将保持在同一位置，而不是随着导航移动。当您将鼠标悬停在其他链接上时，它将转到正确的位置，但当它返回到原始位置时，它将完全关闭，具体取决于浏览器大小的更改程度。您可以在上面的链接中看到问题，并将浏览器的一角拉入

让我知道，如果我需要张贴任何CSS的任何一个

---

谢谢

因为您使用的是jQuery，所以可以收听window.resize。您可以初始化

dTop

，因为这不应更改，然后在调整浏览器大小时设置其他变量：

var dLeft;
var dWidth;
var dTop = $('.current-menu-item a').offset().top;

$(function(){
    //listen to window.resize
    $(window).on("resize", function () {
        //update variables     
        dLeft = $('.current-menu-item a').offset().left+15;
        dWidth = $('.current-menu-item a').width();
    }).trigger("resize"); //sets variables when page loads
});

---

至于隐藏下拉列表，您只需在

.grid-8

css类中删除

overflow:hidden

。

从

.grid-8

中删除

overflow:hidden

，在这两个位置，它都是为截止问题定义的。感谢您的回复。我尝试过更新Jquery，但在调整大小时仍然存在同样的问题，页面加载时不会出现幻线，当您将鼠标悬停在导航项上时，幻线就会出现。不过现在会出现下拉列表，谢谢！

var dLeft;
var dWidth;
var dTop = $('.current-menu-item a').offset().top;

$(function(){
    //listen to window.resize
    $(window).on("resize", function () {
        //update variables     
        dLeft = $('.current-menu-item a').offset().left+15;
        dWidth = $('.current-menu-item a').width();
    }).trigger("resize"); //sets variables when page loads
});