Zurb 基金会中的菜单不起作用

Question

我是做后端开发的，对前端略知一二。这个周末，我做了一个爱好然后就卡在这里了。

我按照这个教程：http://foundation.zurb.com/apps/docs/#!/menu-bar 不知道为什么菜单显示不正确:

来源HTMLview-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>

结果：

(foundation.min.css正确加载，未损坏link)
帮助我正确显示菜单使用 Zurb 基础。谢谢！

Answer 1

使用<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>

然后结果：

参考：
http://foundation.zurb.com/sites/docs/dropdown-menu.html#horizontal
http://foundation.zurb.com/sites/docs/menu.html

Zurb 基金会中的菜单不起作用

Menu in Zurb foundation not work

html

css

responsive-design

zurb-foundation

zurb-foundation-6