0
誰も私が持っているこのドロップダウンの問題で私を助けることができますか？ 私はちょうどhtml5 & cssとimを学んでいます。 ほとんど私はここに、またはw3の学校を得る問題を解決する。今度は リンクが付いたメニューバーを作成し始めました。リンク "Leistungen"の1つにドロップダウンが必要です。私はw3の学校でコーディングを見て、私のプロジェクトでこれを実装しようとしましたが、何かがうまくいきません。なぜこのドロップダウンが機能しないのですか？
またCodePenを経由して、コードを確認することができます。 https://codepen.io/gosagir/pen/ppbrLE
または ライブページ：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;
}
ありがとう、私はこのオーバーフローの隠れた物を考えましたが、このディスプレイはブロックです。最後に問題が解決しました。ちょうど1つのこと、私はサブメニューにホバーすると消えます。どのように私はこれを修正することができます？ –
素晴らしいです。私はあなたが何を意味するか分からない。サブメニュー項目の上にマウスを置くと、表示されたままになります。 – pjones235
私の間違い申し訳ありません！すべての作品は大変ありがとうございます！ –