3
Ich habe die Codes unten, aber wenn ich den Code mit Visual Studio Code ändere und es in meinem Chrome-Browser ausführe, kann ich das Dropdown-Menü in den "Hot Products" nicht sehen. Sektion.Mein Dropdown-Menü kann im Chrome-Browser nicht angezeigt werden, aber wenn ich die Codes hier einfüge, kann ich das anzeigen. Woher?
Wenn ich jedoch den Code hier einfügen (stackoverflow), kann ich mein Dropdown-Menü sehen. Kann mir jemand erklären, wie das passiert ist? Und wie kann ich dieses Problem beheben, so dass ich das in allen Arten von Browsern anzeigen kann? Danke vielmals!
body {
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Navigation bar */
#navigation_bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4CAF50;
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
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #4CAF50;
}<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Restaurant</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script>
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script>
<script type='text/javascript' src='javascript/script.js'></script>
</head>
<body>
<!--Navigation bar-->
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li><a href="navigation_bar/promotion.html">Promotion.</a></li>
<!--drop down menu-->
<li class="dropdown"><a href="navigation_bar/hot_products.html" class="dropbtn">Hot Products.</a>
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li><a href="navigation_bar/cold_products.html">Cold Products.</a></li>
<li><a href="navigation_bar/snacks.html">Snacks.</a></li>
<li><a href="navigation_bar/about_us.html">About Us.</a></li>
<li><a href="navigation_bar/contact_us.html">Contact Us.</a></li>
</ul>
</body>
</html>
Nur ein Vorschlag. Lean, wie man die Browser-Entwicklerwerkzeuge benutzt, ist es in solchen Wanzen so hilfreich. Je früher desto besser! –