0
누구든지이 드롭 다운 문제로 나를 도울 수 있습니까? 메신저 그냥 html5 & CSS와 인스턴트 메신저 학습. 대부분 나는 여기 또는 w3 학교에 도착하는 문제를 해결합니다. 이번에는 링크가있는 메뉴 바를 만들기 시작했고 "Leistungen"링크 중 하나에 드롭 다운이 있어야합니다. 나는 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;
}
와우 감사합니다.이 오버 플로우 숨겨진 것에 대해 생각했지만이 표시는 차단됩니다. 문제가 마침내 해결되었습니다. 지금은 한 가지, 서브 메뉴에 마우스를 가져 가면 사라집니다. 내가 어떻게 고칠 수 있니? –
굉장합니다. 무슨 뜻인지 모르겠다. 내 마우스를 하위 메뉴 항목 위로 가져 가면 표시된 상태로 유지됩니다. – pjones235
죄송합니다. 내 실수! 모든 작품은 정말 감사합니다. –