CODEWITHSUNDEEP
zurb-foundation
Illuminator
Illuminator

Reputation: 565

Zurb Foundation dropdown misplace

I've tried Zurb Foundation Dropdown. I've copy everything from Zurb Foundation docs but I see my dropdown unlike Foundation docs. My dropdown misplaced.


On Foundation doc: On Foundation doc http://image.free.in.th/v/2013/iy/140810073919.png


My page:

My page http://image.free.in.th/v/2013/ic/140810073900.png

Here is my test code:

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foundation | Welcome</title>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
    <div class="row">
        <div class="large-12 columns">
            <!-- Dropdown -->
            <a href="#" data-dropdown="drop1">Has Dropdown</a>
            <ul id="drop1" class="f-dropdown" data-dropdown-content>
                <li><a href="#">This is a link</a></li>
                <li><a href="#">This is another</a></li>
                <li><a href="#">Yet another</a></li>
            </ul>

        </div>
    </div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
    </body>
</html>

Upvotes: 0

Views: 203

Answers (1)

Marcus
Marcus

Reputation: 453

you are missing the reference to the dropdown js

<script src="js/foundation/foundation.dropdown.js"></script>

http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html

Upvotes: 2

Related Questions