ansaurus

Question

Sliding menu problem

Answer 1

+1 A:

You should restructure your code a bit to be valid as well, like this:

<ul class='nav'>
  <li><a href='#'>About</a>
    <ul class='submenu'>
      <li><a href='#'>Stuff</a></li>
    </ul>
  </li>
</ul>

The bug with z-indexing you have with this I'm not understanding...you should add that or ask a new question specifically on it, because your HTML should be like this.

This lets you hover inside the same element...and a <ul> can't be a child of a <ul> anyway, it's invalid HTML (even though the browser will usually render it).

Then you can use jQuery like this:

$('ul.nav li').hover(function(){
  $(this).children('.submenu').stop(true, true).slideToggle();
});

You can give it a try here, the .stop() call addition is to prevent animation queue build-up.

Nick Craver 2010-08-17 20:26:48

Answer 2

A:

here is a an example

<style type="text/css">
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        border: 1px solid orange;
        color: white;
        background-color: orange;
    }
    .menucontrol a:hover
    {
        background-color: #fff;
        color: #333;
    }
    .menucontrol, .menucontrol ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        line-height: 1.5em;
    }
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        display: block;
        padding: 0px 5px;
        text-decoration: none;
    }
    .menucontrol li
    {
        float: left;
        position: relative;
    }
    .menucontrol ul
    {
        position: absolute;
        width: 12em;
        top: 1.5em;
        display: none;
    }
    .menucontrol li ul a
    {
        width: 12em;
        float: left;
    }
    .menucontrol ul ul
    {
        top: auto;
    }
    .menucontrol li ul ul
    {
        left: 12em;
        margin: 0px 0 0 10px;
    }
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
    {
        display: none;
    }
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
    {
        display: block;
    }
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a><ul>
                            <li><a href="#">3.1.1 Download</a></li>
                            <li><a href="#">3.1.2 Tutorial</a></li>
                        </ul>
                        </li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
function mainmenu()
{
    $(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
    $(" .menucontrol 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();
});

Vinay B R 2010-08-17 22:39:36

ansaurus

tags:

views:

answers:

Sliding menu problem

related questions