Question

我正在尝试将导航栏中服务菜单上的下拉列表作为下拉列表弹出，但它不起作用并且水平显示。我希望它水平弹出，奇怪的部分是它在 safari 中以垂直方式出现，但在 chrome 中。有人可以帮我解决这个问题吗？我是 html 和 css 的初学者。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html, body {
    overflow-x: hidden;
}

body {
    position: relative;
}


nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #000000;
    color: #f9f9f9;
    font-family: 'Open Sans', sans-serif;
    font-size: large;
}

.logo {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 20px;
}

.test {
    margin-top: 670px;
}

.nav-links {
    list-style-type: none;
    padding: 1.2%;
    margin: 0;
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-links li a {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}


li a:hover {
    background-color: #3498DB;

}

.burger {

    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 4px;
    background-color: #f9f9f9;
    margin: 5px;


}

.intro {

    border: 5px solid black;
    background-color: white;
    margin-top: 2%;
    margin-left: 14%;
    font-family: 'Open Sans', sans-serif;
    width: 69%;
    padding: 20px;
    text-align: center;
    word-break: break-word;

}

h2 {
    font-size: 27px;
    word-break: break-word;
    letter-spacing: 3px;
    text-transform: capitalize;
}


.row {
    margin: 10px -14px;
}

.row,
.row > .column {
    padding: 8px;
}


.column {
    float: left;
    width: 25%;
}


.row:after {
    content: "";
    display: table;
    clear: both;
}


.content {
    background-color: white;
    padding: 4px;
    border: 5px solid black;
    font-family: 'Open Sans', sans-serif;
}

.push {
    margin-left: 18%;
    margin-top: 2%;
}

.dropdown .dropbtn {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    border: none;
    outline: none;
    color: white;
    padding: 26px 26px;
    background-color: black;
    font-family: 'Open Sans', sans-serif;
    margin: 1px;
}

.nav-links a:hover, .dropdown:hover .dropbtn {
    background-color: #3498DB;
}

.dropdown-content {

    display: none;
    position: absolute;
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    display: block;
    float: left;
    color: black;
    padding: 4px 8px;
    text-decoration: none;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #3498DB;
}

.dropdown:hover .dropdown-content {
    display: block;

}

<!doctype html>
<html lang="en-au">
<head>
    <style>
        body {
            background-image: url('IMG/deck1.jpg');
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

        }
    </style>
    <title> Cut & Fab </title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="CSS/style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.gstatic.com" rel="preconnect">

</head>

<body>

<nav>
    <div class="logo">
        <h4> Edge Concreting and Landscaping </h4>
    </div>

    <ul class="nav-links">

        <li>
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="PAGES/quotes.html">Quotes</a>
        </li>
        <li>
            <a href="PAGES/contact.html">Contact</a>
        </li>

        <li class="dropdown">
            <button class="dropbtn">Services
            </button>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </li>
    </ul>

    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>


<div class="intro">

    <h2> We are a small Melbourne based company who are passionate about offering quality and affordable services</h2>

</div>

<div class="push">

    <div class="row">
        <div class="column">
            <div class="content">
                <img alt="Concreting" src="IMG/image3.jpeg" style="width:100%">
                <h2>Concreting</h2>
                <p>Been thinking to turn that muddy pathway into a solid and safe walking space? Got you covered! </p>
            </div>
        </div>

        <div class="column">
            <div class="content">
                <img alt="Landscaping" src="IMG/image2.jpeg" style="width:100%">
                <h2>Landscaping</h2>
                <p>Looking for that perfect backyard to host a summer bbq? We can get that done for you!</p>
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img alt="Decking" src="IMG/deck.jpeg" style="width:100%">
                <h2>Decking</h2>
                <p>Wanting to get a deck for a specific spot? We can have it decked out for you!</p>
            </div>
        </div>
    </div>
</div>

 

</html>

Answer 1

<a> 是一个 inline element，这意味着它不会突破到自己的行上。您可以通过将 display: block; 应用于元素的 CSS 样式来更改此行为。

您也可以将链接用 <ul> 包裹在带有 <li> 的 <li> 中，就像您在主导航中所做的那样，因为 {{1}} 是一个 block-level element。

下拉列表不垂直显示

1 个答案: