我是从后端开发开始的，对前端略知一二。在这个周末，我做了一个爱好，然后就停在这里了。
我按照这个教程:http://foundation.zurb.com/apps/docs/#!/menu-bar
我不知道为什么菜单显示不正确:
源代码 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> Làm lại</button>
<button class="small button" type="submit"><i class="fi-key"></i> Đă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> Homepage</a>
<br />
Copyright © 2016 VyHN
</body>
</html>
结果:
(foundation.min.css 正确加载，没有损坏的链接)
帮助我正确显示菜单使用 Zurb 基础。谢谢!
最佳答案
使用 <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
关于html - Zurb 基金会中的菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34690298/