0

因此，在使用此导航解决了许多其他问题之后。我有两个最后的小问题。

第一个，更重要的是要修复，当下拉列表落下时，它会被包含在网格中的 div 切断。相反，它需要“浮动”在这个网格之外和下面的幻灯片上。不知道该怎么做。查看问题http://lookseewatch.com/independentinsurance/

我故意将高度设置为 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>

第二个问题是您悬停的位置后面的蓝色条。它的起点绝对是位置

var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu
var dWidth = $('.current-menu-item a').width();
var dTop = $('.current-menu-item a').offset().top;

所以当网页加载时，它工作得很好，但是当你调整窗口大小时，“魔术线”停留在同一个地方而不是随着导航移动。当您将鼠标悬停在其他链接上时，它会转到正确的位置，但是当它返回到原始位置时，它会完全关闭，具体取决于浏览器大小的变化程度。您可以在上面的链接中看到问题，并将浏览器的一角拉进去。

如果我需要为任何一个发布任何 CSS，请告诉我。

谢谢！

4

1 回答 1

0

由于您使用的是 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
});

至于隐藏的下拉菜单，您只需要删除overflow:hiddencss.grid-8类。

于 2012-12-07T15:51:56.950 回答