CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jylny
jylny

Reputation: 156

JQuery Dropdown List Issues

I'm trying to make a dropdown list with JQuery and HTML/CSS. LINK 1 slides a dropdown list nicely when moused over, but I can't get LINK 3 to work the same. Would appreciate if y'all could provide some help. Thanks!

Javascript

$(document).ready(function() {
    $(".main_bar > li").hover(function() {
        $(this).find(".sub_bar").slideDown(200);
    }, function() {
        $(this).find(".sub_bar").slideUp(200);
    });
});

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <title></title>
</head>
<body>
    <nav>
        <ul class="main_bar">
            <li>LINK1
                <ul class="sub_bar">
                    <li>LINK1</li>
                    <li>LINK2</li>
                    <li>LINK3</li>
                </ul>
            </li>
            <li>LINK2</li>
            <li>LINK3</li>
                <ul class="sub_bar">
                    <li>LINK1</li>
                    <li>LINK2</li>
                    <li>LINK3</li>
                </ul>
            <li>LINK4</li>
        </ul>
    </nav>
</body>
</html>

CSS

* {
    margin:0px;
    padding:0px;
}

ul {
    list-style:none;
}

ul.main_bar > li {
    float:left;
    width:25%;
    text-align:center;
}

ul.sub_bar {
    display:none;
}

Upvotes: 2

Views: 49

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

It's simply because you've accidentally closed the <li> too early.

<li>LINK3</li>
  <ul class="sub_bar">
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
  </ul>

Should be:

<li>LINK3
  <ul class="sub_bar">
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
  </ul>
</li>

Hope this helps! :)

Upvotes: 1

Related Questions