multilevel dropdown menu, problem with dropdown

Question

The menu is here: http://voteacnng.org

Problem is with dropdown. It's a WordPress generated code.

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;
                        }

It works if i remove the slideshow under the menu.

It has also a 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();});

Another problem is the arrow... The arrow needs to show up where a child menu is present.

Any ideas?

Answer 1

visibility: "visible",display: "none"

This may be contradicting itself. Try just using display:none; when you want to hide and display:block; when you want to show.

It's hard to relate this to your code as the jQuery returns the following error:

No elements were found with the selector: "ul:first"

Update (@11:07 GMT):

I've used the following extra HTML and jQuery on this example - 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;');
    });
});

I've had to use a <div /> and <p /> s because there is something in your CSS thats not showing <ul /> s You should try to use this as a start but sort out your HTML and CSS so you can mark it up correctly with <ul> s and <li> s.

Hope This helps.

Answer 2

对于箭头

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

Answer 3

Current situation:

Arrows works thanks to @experimentX and we have solution for the dropdowns thanks to @Alex Thomas.

I figured out a thing. There is the following class:

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

If i remove the overflow , will work the dropdowns but the slideshow will move to the top right side of the page. I think for this I need the alternative.