为什么这个下拉列表不起作用？
为什么这个下拉列表不起作用？
提问于 2017-12-20 18:57:26
有人能帮我解决这个下落不明的问题吗？我刚开始学习html5 & css和Im。我主要是解决我在这里遇到的问题，或者是w3学校。这一次我开始创建带有链接的菜单，其中一个链接"Leistungen“应该有一个下拉列表。我在w3学校看了一下编码，并尝试在我的项目中实现这一点，但有些东西根本不管用。
您还可以通过CodePen：https://codepen.io/gosagir/pen/ppbrLE检查代码
或Live：http://www.air-transfer.at/Umzug-Nach/BerlinV3/BerlinV3.html
HTML代码：
<!DOCTYPE html>
<html lang="de-AT">
<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">
<meta name="title" content="▶ Umzug nach Berlin | Ihr Umzugsprofi | Europaweite Umzüge -50%" />
<meta name="description" content="Ihr verlässlicher Partner rund um Ihren Umzug nach Berlin. Mit Erfahrung aus über 15.000 Umzügen in ganz Europa. Jetzt unverbindlich anfragen. ✓ EU-Umzug -50%">
<meta name="robots" content="index, follow" />
<meta name="keywords" content="umzug nach berlin, umzug berlin, umzug, berlin, umzugsfirma, übersiedlung" />
<title>Umzug nach Berlin - umzugdirekt.at</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- start header -->
<header>
<!-- start navigation -->
<nav class="navbar">
<div class="nav-elements">
<div class="umzugdirekt_logo_nav">
<a href="http://www.umzugdirekt.at/">
<img src="http://www.air-transfer.at/img/umzugdirekt_logo.svg" alt="umzugdirekt_logo" class="umzugdirekt_logo_link" />
</a>
</div>
<div class="menu">
<ul class="menu_links">
<li><a href="http://www.air-transfer.at/">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Leistungen</a>
<div class="dropdown-content">
<a href="http://www.air-transfer.at/privatumzug/">Privatumzug</a>
<a href="http://www.air-transfer.at/firmenumzug">Firmenumzug</a>
<a href="http://www.air-transfer.at/Auslandsumzug">Auslandsumzug</a>
<a href="http://www.air-transfer.at/Entrümüelung">Entrümüelung</a>
<a href="http://www.air-transfer.at/Raeumung">Räumung</a>
<a href="http://www.air-transfer.at/Transport">Transort</a>
<a href="http://www.air-transfer.at/einlagerung">Einlagerung</a>
</div>
</li>
<li><a href="http://www.air-transfer.at/preise">Preise</a></li>
<li><a href="http://www.air-transfer.at/kontakt">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start section 1 -->
</body>
</html>CSS代码：
/*
Table of contents
01. Font & Typographic
02. Navbar
03.
*/
/* ===================================
01. Font & Typographic
====================================== */
/* Font */
@font-face { font-family: 'titillium';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../../fonts/TitilliumWeb-Regular.woff2') format('woff2'),
url('../../../fonts/TitilliumWeb-Regular.woff') format('woff'),
url('../../../fonts/TitilliumWeb-Regular.ttf') format('ttf'),
url("../../../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"),
url('../../../fonts/TitilliumWeb-Regular.eot') format('eot');
}
@font-face {
font-family: 'titillium';
font-style: bold;
font-weight: 700;
font-display: swap;
src: url('../../../fonts/TitilliumWeb-Bold.woff2') format('woff2'),
url('../../../fonts/TitilliumWeb-Bold.woff') format('woff'),
url('../../../fonts/TitilliumWeb-Bold.ttf') format('ttf'),
url("../../../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"),
url('../../../fonts/TitilliumWeb-Bold.eot') format('eot');
}
html {
font-family: 'titillium', sans-serif;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
/* heading */
h1, h2, h3 {margin:0 0 25px; padding:0; letter-spacing: 0; font-weight: 700;}
h1 {font-size:70px; line-height: 70px;}
h2 {font-size:55px; line-height:60px}
h3 {font-size:48px; line-height:54px}
/* ===================================
02. Navbar
====================================== */
/* Navbar */
body {margin:0;}
.navbar {
overflow: hidden;
box-sizing: border-box;
background-color: #FFFFFF;
position: fixed;
top: 0;
padding: 0 30px;
width: 100%;
height: 80px;
box-shadow: rgba(0,0,0,.12) 0 1px 3px;
}
.nav-elements {
box-sizing: border-box;
background-color: #FFFFFF;
width: 100%;
height: 80px;
}
.umzugdirekt_logo_nav {
display: block;
float: left;
}
.umzugdirekt_logo_nav img {
display: block;
height: 40px;
width: auto;
padding: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu {
float: right;
display: inline-block;
}
.menu ul {
list-style-type: none;
margin: 0;
font-size: 18px;
}
.menu li {
float: left;
}
.menu li a {
display: block;
padding: 26.5px 20px;
text-decoration: none;
}
a:link {
color: #000000;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.active {
color: #05aee9;
}
a:hover {
color: #05aee9;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-20 19:18:32
因为nav元素具有规则溢出:隐藏，它实际上防止所有相关项的高度超过导航条本身的高度。
删除溢出:隐藏在.navbar规则中。
在此之后，您需要一些东西来告诉下拉内容子菜单实际下拉。用这个：
.dropbtn:hover ~ .dropdown-content {
display: block;
}
如果这个答案对你有帮助，请批准它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47912685
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号