Проблемы с позиционированием меню HTML / CSS на MouseLeave - PullRequest
Новая
       1

Проблемы с позиционированием меню HTML / CSS на MouseLeave

0 голосов
/ 28 декабря 2011

Я опускаю горизонтальное меню, которое работает нормально, пока я не покину его.Чтобы проиллюстрировать проблему лучше, вот несколько скриншотов:

  1. Когда я наведу курсор мыши на «Пункт меню 3»: enter image description here
  2. Когда я наведу курсор мыши на ul (Chrome): enter image description here
  3. При наведении мыши на ul (Firefox): enter image description here

При наведении мыши на ul мне нужно меню, которое остается на скриншоте 1. Вотмой HTML: 

<div  style="position: relative">                
    <nav>
         <ul id="main-menu">
            <li>@Html.ActionLink("Menu item 1", "Index", "InternalHome")</li>
            <li>@Html.ActionLink("Menu item 2", "Index", "TeachingMaterials")
                <ul>
                    <li>@Html.ActionLink("Menu item 2.1", "Index", "TeachingMaterials")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("Menu item 3", "Index", "TeachingMaterials")
                <ul>
                    <li>@Html.ActionLink("Menu item 3.1", "Index", "TeachingMaterials")</li>
                    <li>@Html.ActionLink("Menu item 3.2", "Index", "TeachingMaterials")</li>
                    <li>@Html.ActionLink("Menu item 3.3", "Index", "TeachingMaterials")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("Menu item 4", "Index", "TeachingMaterials")
            <li>@Html.ActionLink("Menu item 5", "Index", "TeachingMaterials")
        </ul>

    </nav>
</div>

CSS: 

#main-menu *
{
    margin: 0;
    padding: 0;
}

#main-menu
{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 100px;
}

#main-menu li
{
    list-style: none;
    float: left;
}
#main-menu li a
{
    margin-right: 5px;
    padding: 2px;
    display: block;
}

#main-menu li ul li a
{
    display: block;
    width: 100%;
}

#main-menu li ul
{
    display: none;
}

#main-menu li:hover ul
{
    position: absolute;
    display: inline;
    left: 0;
    width: 100%;
}

#main-menu li:hover li
{
    float: left;
}

и простой JS для отображения подменю: 

$(document).ready(function () {
var menuLinks = $("#main-menu li");

menuLinks.hover(function () {
    $("#main-menu li ul").hide();
    var menuLinkChildren = $(">ul", $(this));
    if (menuLinkChildren.length > 0) {
        menuLinkChildren.show();
    }
    return false;
}, null);

});

1 Ответ

1 голос
/ 28 декабря 2011

Проблема в том, что вы сочетаете CSS hover и jquery hover.К сожалению, для вас CSS выигрывает эту битву в современных браузерах.Только с CSS3 поддерживается: hover для различных элементов, поэтому, если вам нужно это для работы, x-браузеры не используют li: hover.

Вместо того, чтобы скрывать subMenuItems в CSS, вы можете использовать этот селектор, чтобы определить, чтопроисходит, когда они показаны.Скройте подменю в jquery onload.

Единственное, что нужно сделать, это отобразить подменю и скрыть подменю от братьев и сестер.

пример: http://jsfiddle.net/tive/YzwPa/

CSS 

#main-menu *
{
    margin: 0;
    padding: 0;
}

#main-menu
{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 100px;
}

#main-menu li
{
    list-style: none;
    float: left;
}
#main-menu li a
{
    margin-right: 5px;
    padding: 2px;
    display: block;
}

#main-menu li ul li a
{
    display: block;
    width: 100%;
}

#main-menu li ul
{
    position: absolute;
    display: inline-block;
    left: 0;
    width: 100%;
}

#main-menu li ul li
{
    float: left;
}

JS 

$(function() {
    var menuLinks = $("#main-menu li");
    menuLinks.find("ul").hide();
    menuLinks.hover(function() {
        $(this).siblings().find("ul").hide();
        $(this).find("ul").show();
    });
});
...