многоуровневое выпадающее меню, проблема с выпадающим

Question

Меню здесь: http://voteacnng.org

Проблема с выпадающим меню.Это сгенерированный WordPress код.

Css:

.menu-tophorizontalmenu-container {
    margin: 18px auto 21px;
    overflow: hidden;
    width: 1005px;
    display: block;
}

    .menu {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

    .menu * {
        margin: 0;
        padding: 0;
    }

        .menu a {
            display: block;
            color: #fff;
            padding: 6px 16px;
            background: #000;
        }

        .menu li {
            position: relative;
            float: left;
            font-size: 18px;
            margin: 2px 2px 0 0;
            text-transform: uppercase;
        }

            .menu ul {
                position: absolute;
                top: 33px;
                left: 0;
                background: #000;
                display: none;
                list-style: none;
                z-index: 999px;
            }

                .menu ul li {
                    position: relative;
                    display: block;
                    width: 257px;
                    margin: 0 0 2px 0;
                    padding: 0;
                }

                    .menu ul li a {
                        display: block;
                        padding: 6px 16px;
                        color: #fff;
                        background: #000;
                    }

                    .menu ul li a:hover {
                        background: #1191B7;
                        color: #000;
                    }

                        .menu ul ul {
                            left: 257px;
                            top: 0;
                        }

                        .menu .menulink {

                        }

                        .menu .sub {
                            background: url(img/arrow-left.jpg) no-repeat 136px 8px;
                        }

Работает, если я удаляю слайд-шоу из меню.

Также есть JavaScript:

function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });} $(document).ready(function(){                  
mainmenu();});

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

Есть идеи?

Answer 1

visibility: "visible",display: "none"

Это может противоречить самому себе. Попробуйте использовать display:none;, когда хотите скрыть, и display:block;, когда хотите показать.

Трудно связать это с вашим кодом, поскольку jQuery возвращает следующую ошибку:

Не найдено элементов с селектор: "ul: first"

Обновление (@ 11: 07 GMT):

В этом примере я использовал следующие дополнительные HTML и jQuery - check jsfiddle

HTML:

<div class="menu-tophorizontalmenu-container">
  <ul id="menu-tophorizontalmenu" class="menu">
    <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-home menu-item-36">
      <a href="http://voteacnng.org">Homepage</a>   
      <div style="display:none;">
        <p>I am a</p>
        <p>menu item</p>
        <p>can you see?</p>
      </div>
    </li>
    // Other menu items
    <li>...</li>
  </ul>
</div>

JQuery:

$("#menu-item-36").hover(function(){
    $("#menu-item-36").find("div").attr('style', 'display:block;');
    $(this).mouseout(function(){
        $("#menu-item-36").find("div").attr('style', 'display:none;');
    });
});

Мне пришлось использовать <div /> и <p /> s, потому что в вашем CSS есть что-то, что не показывает <ul /> s. Вы должны попытаться использовать это как начало, но разобраться в HTML и CSS, чтобы вы можно правильно пометить его с помощью <ul> с и <li> с.

Надеюсь, это поможет.

Answer 2

Текущая ситуация:

Стрелки работают благодаря @experimentX, и у нас есть решение для выпадающих списков благодаря @Alex Thomas.

Я кое-что понял. Есть следующий класс:

.TopHorizontalMenu {
        margin: 18px auto 21px;
        overflow: hidden;
        width: 1005px;
        display: block;
    }

Если я удалю overflow, будут работать выпадающие меню, но слайд-шоу переместится в верхнюю правую часть страницы. Я думаю для этого мне нужна альтернатива.

Answer 3

Для стрелки

$("#menu-tophorizontalmenu ul").closest('li').find('a').prepend('>>');