Question

我要做的是创建一个导航栏。除了CSS部分，我从W3Schools获得了这些代码。

@font-face {
  font-family: "Yeezy";
  src: url("../static/yeezy.ttf");
}

* {
  font-family: "Yeezy";
  font-weight: bold;
  color: #dbdbdb !important;
}

html,
body {
  height: 900px;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://i.imgur.com/pxYxnOn.jpg");
}


/* Extra Background Links
    Owens Default SSV7.4:       https://i.imgur.com/cwkWLJa.png
    Macs Default Multicolor:    https://i.imgur.com/pxYxnOn.jpg
    "Gen5" BG Lookalike:        https://i.imgur.com/UvTCiL8.jpg
    Dark Purple/Blue Triangle:  https://i.imgur.com/pd7cgsq.jpg
    Lava Pink Tree:             https://i.imgur.com/ZN3rikQ.jpg
    */


/* Start Of Navigation Bar */


/* Navbar container */

.navbar {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}


/* Links inside the navbar */

.navbar a {
  float: left;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: rgba(0, 0, 0, 0.2);
  padding: 17px 13px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* Add a red background color to navbar links on hover */

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: rgba(0, 0, 0, 0.3);
}


/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  min-width: 160px;
  box-shadow: 0px 0px 16px -20px rgba(0, 0, 0, 0.1);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: rgba(0, 0, 0, 0.2);
  ;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="icon" href="../static/s_logo.png">
  <title>Sudo Splash</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" />
  <link rel="stylesheet" href="../static/styles.css">
</head>
<br>
<div class="mainlogo">
  <img src="../static/logo.png" style="width: 350px; display: block; margin-left: auto; margin-right: auto;">
</div>

<body>
  <div class="navbar">
    <a href="#home">Home</a>
    <div class="dropdown">
      <button class="dropbtn">Splash Mode</button>
      <div class="dropdown-content">
        <a href="splashtasks">Splash Tasks</a>
        <a href="h2splash">How to use Product Mode</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Product Mode</button>
      <div class="dropdown-content">
        <a href="producttasks">Product Tasks</a>
        <a href="h2product">How to use Product Mode</a>
      </div>
    </div>
  </div>
</body>

</html>

问题是每当我进入下拉菜单部分时，链接不会在导航栏上显示或显示重叠。

当我将.dropdown-content位置更改为“relative”时，就会发生这种情况：

Answer 1

如上所述，代码工作正常

enter code here https://jsfiddle.net/Gauravkakkar25/o3ybzdtf/

Answer 2

让它发挥作用。删除了 HTML行：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" />

Answer 3

问题是由您使用的外部样式表引起的： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" />

如果您不需要，请将其删除。

如何修复W3Schools默认导航栏并使用下拉栏工作？

3 个答案: