JQuery Lava Lamp Drop Down закрывается слайд-шоу и неправильно меняет положение при изменении размера браузера

Question

Так что после решения куча других проблем с этой навигацией. У меня есть две последние маленькие проблемы.

Первое, что более важно исправить, состоит в том, что когда выпадающий список падает, он обрезается содержащим элементом 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 для любого.

Спасибо!

Answer 1

Поскольку вы используете 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:hidden на .grid-8 класс CSS