Menu in Zurb foundation not work

Question

I start as a back-end developer, I know a little about front-end. At this weekend, I do a stuff as a hobby then stuck at here.

I follow this tutorial: http://foundation.zurb.com/apps/docs/#!/menu-bar I don't know why the menu display incorrect:

Source HTML view-source:http://localhost:8080/vyhndotnet/registration.jsp#

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Developer life</title>
<link rel="stylesheet"
    href="/vyhndotnet/css/foundation.min.css" />
<link rel="stylesheet"
    href="/vyhndotnet/css/app.css" />
<link rel="stylesheet"
    href="/vyhndotnet/foundation-icon-font-3/foundation-icons.css" />
    <script>$(document).foundation();</script>
</head>
<body>

        <ul class="dark menu-bar">
            <li><a href="#">Homepage</a></li>
            <li><a href="#">Core Java</a></li>
            <li><a href="#">JSP</a></li>
            <li><a href="#">Web service</a></li>
            <li><a href="#">Hibernate</a></li>
        </ul>


<div class="row">
    <div class="large-4 columns">
        <h3>Đăng ký thành viên</h3>
        <form action="/vyhndotnet/Registration" method="post">
            <label>Tên đăng nhập: </label>
            <input type="text" name="username" />

            <label>Số điện thoại: </label> 
            <input type="text" name="mobile_number" />

            <label>Email: </label> 
            <input type="text" name="email" /> 

            <label>Quốc gia: </label> 
            <input type="text" name="nation" />


            <button class="small button" type="reset"><i class="fi-loop"></i>&nbsp;Làm lại</button>
            <button class="small button" type="submit"><i class="fi-key"></i>&nbsp;Đăng ký</button>
        </form>
    </div>
</div>


<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<a href="../../index.jsp" class="medium button"><i class="fi-home"></i>&nbsp;Homepage</a>
<br />
Copyright &copy; 2016 VyHN
</body>
</html>

result:

(foundation.min.css load correctly, not broken link)
Help me display menu use Zurb foundation correctly. Thank you!

I am sorry. I have a mistake, this tutorial for `web apps` ( http://foundation.zurb.com/apps/docs/#!/menu-bar ), not for `web page`. But I still want display menu in Zurb foundation way correctly. — Vy Do, Jan 09 '16 at 06:25
You linked to the Foundation for Apps docs but your tags say this question is about Foundation for Sites. Those are two separate frameworks, which one are you using? — Colin Marshall, Jan 11 '16 at 08:53

Vy Do · Accepted Answer · 2016-01-09T13:27:36.657

Use <ul class="dropdown menu" data-dropdown-menu>

</head>
<body>
<div class="v_menu">
    <ul class="dropdown menu" data-dropdown-menu>
        <li><a href="#">HOMEPAGE</a></li>
        <li><a href="#">CORE JAVA</a>
            <ul class="menu">
                <li><a href="#">OOP</a></li>
                <li><a href="#">Collections</a></li>
            </ul>       
        </li>
        <li><a href="#">JSP</a></li>
        <li><a href="#">WEB SERVICE</a></li>
        <li><a href="#">HIBERNATE</a></li>
    </ul>
</div>

then result:

Reference:
http://foundation.zurb.com/sites/docs/dropdown-menu.html#horizontal
http://foundation.zurb.com/sites/docs/menu.html

Menu in Zurb foundation not work

1 Answers1