jQuery dropdown menu in same div

Question

I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?

Here is my code:

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").mouseover(function () {
                $("#panel").slideDown("slow");
            });
            $("#flip").mouseleave(function () {
                $("#panel").slideUp("slow");
            });
        });
    </script>

    <style type="text/css">
        #flip {
            padding: 1px;
            text-align: left;
            border: solid 1px #c3c3c3;
        }
        #panel {
            padding: 1px;
            text-align: left;
            border: solid 1px #c3c3c3;
            padding: 5px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="flip">
        <ul>Home</ul>
    </div>
    <div id="panel">
        <ul><a href="#">Sub</a>
            </br>
            <a href="#">Sub</a>
            </br>
            <a href="#">Sub</a>
            <ul>
    </div>
</body>

</html>

`

I removes <li> those does not work . I need all in same div i mean using 1st div — sajid
– sajid, Commented Jan 13, 2014 at 2:10

kaizora · Accepted Answer · 2014-01-13 06:10:05Z

2

A nested unordered list would work, something like this:

<ul id="flip">
    <li>Home
        <ul id="panel">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
        </ul>
    </li>
</ul>

In CSS, all you would need is to hide your sub-menu:

#panel {
    display:none;
}

jQuery is the same as you had it.

See here: http://jsfiddle.net/kaizora/23uuL/

PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.

edited Jan 13, 2014 at 6:10

answered Jan 13, 2014 at 2:46

kaizora

235 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jasonflaherty · Accepted Answer · 2014-01-13 02:35:03Z

1

How about this:

$("#flip").mouseover(function () {
      $("#panel").slideDown("slow");

      $("#panel").mouseleave(function () {
          $("#panel").slideUp("slow");
      });
});

Fiddle Here: http://jsfiddle.net/vWGsC/

answered Jan 13, 2014 at 2:35

jasonflaherty

1,9547 gold badges40 silver badges84 bronze badges

Comments

patrick · Accepted Answer · 2014-01-13 02:40:44Z

1

If you want to you cold also use pure CSS.

<ul class="nav">
<li class="dropdown">
    <a href="#">Home</a>
      <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li class="dropdown">
            <a href="#">second dropdown</a>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </li>
    </ul>
</li>

This would be the html from something I have saved some time ago.

Try it out! :)

http://jsfiddle.net/patrickhaede/dqxm4/

answered Jan 13, 2014 at 2:40

patrick

8812 gold badges9 silver badges33 bronze badges

Comments

F.C.Hsiao · Accepted Answer · 2014-01-13 03:40:57Z

1

DEMO Background color is for clearly view for user.

  var temp = $('#flip ul li:eq(0)').nextAll();
    temp.hide();
    $('#flip ul').mouseenter(function(event) {
        temp.slideDown("slow");
    });
    $('#flip ul').mouseleave(function() {
        temp.slideUp("slow");
    });

#flip li , #flip ul { list-style-type: none; background-color: yellow;}

Home

Sub

Sub

Sub

answered Jan 13, 2014 at 3:40

F.C.Hsiao

1089 bronze badges

Collectives™ on Stack Overflow

jQuery dropdown menu in same div

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related