为什么CSS Javascript下拉菜单没有显示在任何浏览器中？
这是我一直试图使用HTML5、CSS和JavaScript制作的导航栏的代码片段。我尝试使用CSS和Javascript创建的下拉菜单与W3Schools网站中的示例类似。这是我正在使用的代码段：为什么CSS Javascript下拉菜单没有显示在任何浏览器中？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,这是我一直试图使用HTML5、CSS和JavaScript制作的导航栏的代码片段。我尝试使用CSS和Javascript创建的下拉菜单与W3Schools网站中的示例类似。这是我正在使用的代码段： <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable= yes"> <meta charset
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/></a>
<div class="container">
<ul class="left">
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Home</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Featured</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</a></li>
</ul>
<ul class="right">
<li><a href="#"><span class="material-icons icon-design"></span>Events & Offers</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
食品会议
html，正文{
字体系列：佐治亚，衬线；
字体大小：正常；
字体大小：16px；
背景色：#eceff1；
}
导航{
背景色：白色；}
导航ula{
颜色：17479e；
字体大小：正常；
}
导航：悬停{
文字装饰：无；
}
.nav包装器a：悬停{
颜色：17479e；
文字装饰：无；
}
.图标设计{
位置：相对位置；
顶部：4px；
字体大小：20px；
}
.对{
位置：相对位置；
左：-40px；
}
.dropbtn{
显示：内联块；
}
.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉内容a:悬停{背景色：#f1f1}
.show{display:block；}
-
/*当用户单击按钮时，在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i
食品会议
html，正文{
字体系列：佐治亚，衬线；
字体大小：正常；
字体大小：16px；
背景色：#eceff1；
}
导航{
背景色：白色；}
导航ula{
颜色：17479e；
字体大小：正常；
}
导航：悬停{
文字装饰：无；
}
.nav包装器a：悬停{
颜色：17479e；
文字装饰：无；
}
.图标设计{
位置：相对位置；
顶部：4px；
字体大小：20px；
}
.对{
位置：相对位置；
左：-40px；
}
.dropbtn{
显示：内联块；
}
.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉内容a:悬停{背景色：#f1f1}
.show{display:block；}
-
/*当用户单击按钮时，在隐藏和显示下拉内容之间切换*/
/*函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i.dropdown content位置：绝对职位：相对到您的。下拉列表
类 $(document).ready(function() {
function myFunction(){
$(".dropbtn").click(function() {
$("#myDropdown").toggle();
});
}