Question

任何人都可以帮我解决这个问题吗？我刚学习html5＆amp; 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="&#9654; 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;
}

Answer 1

使用HTML Select可以实现默认下拉列表，这里有一些参考HTML Select Tag select | MDN

对于自定义下拉列表，您可以按照着名的bootstrap下拉列表进行操作，请检查： Dropdowns | Bootstrap

Answer 2

因为nav元素具有规则overflow：hidden，所以它基本上可以防止所有相关项的高度超过导航栏本身的高度。

删除溢出：隐藏在.navbar规则中。

之后，您需要告诉dropdown-content子菜单实际下拉。使用此：

＆＃13;

.dropbtn:hover ~ .dropdown-content {
	display: block;
}

＆＃13;

如果它可以帮助你，请批准这个答案。

为什么这个Dropdown不起作用？

2 个答案: