导航栏重新定位的麻烦

我正在创建我的网站，并注意到我的Navbar带有下拉列表的位置比我想要的要低得多。我迅速尝试使用一些不同的方法，例如边距和桨板，位置：固定和位置：绝对并设置与顶部的距离，但这几乎删除了我的下拉列表。我很想知道为什么会发生这种情况以及我可以做些什么来修复我的代码。

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: white;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
}
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}
.dropdown:hover .dropdown-content {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>
<h1>Japan: Land of the Rising Sun</h1>
<div style="margin-top: 110px"class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>
</body>
</html>

尝试添加normolize.css或reset.css，它可以让您在每个项目上都有一个启动，每个浏览器都具有相同的样式：

https://necolas.github.io/normalize.css/

您的间距是由于不需要的边距和 h1标签上方的 navbar

因此，您需要从navbar类中删除保证金，然后移动h1 navbar

请参阅下面的演示

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: #333;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
margin: 0;
}
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}
.dropdown:hover .dropdown-content {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>
<h1>Japan: Land of the Rising Sun</h1>
<div class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>
</body>
</html>

您可能想查看bootstrap。
使用Bootstrap，您可以轻松地创建一个美丽而干净的网页。

bootstrap文档

我认为下面的HTML代码是您想做的。（减去您的样式脱离课程）

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <title>
    Japan
  </title>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Intro<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">WEIRD Facts<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nature</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Fauna.htm">Fauna</a>
            <a class="dropdown-item" href="Flora.htm">Flora</a>
            <a class="dropdown-item" href="Geography.htm">Geography</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Culture</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Cuisine.html">Cuisine</a>
            <a class="dropdown-item" href="Clothing.html">Clothing</a>
            <a class="dropdown-item" href="Traditions.html">Traditions</a>
            <a class="dropdown-item" href="Sports.html">Sports</a>
            <a class="dropdown-item" href="Holidays.html">Holidays</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <main role="main">
    <div class="jumbotron">
      <div class="container">
        <h1 class="d-flex align-items-stretch align-self-stretch">Japan: Land of the Rising Sun</h1>
        <p>
          Mauris egestas pretium mollis. Sed auctor, massa id feugiat bibendum, magna ante cursus erat, sit amet tristique neque lorem ac lacus. Sed sit amet eros et erat sagittis aliquam eget non tortor. In facilisis, ligula dictum feugiat volutpat, massa neque
          suscipit magna, eu blandit nulla leo sed nibh. In fermentum sem lacus, sit amet vulputate ex auctor sit amet. Nulla varius libero sit amet est luctus eleifend. Duis eu nibh et mi porta tempus et a libero. Maecenas dolor risus, ultricies sit
          amet eleifend a, venenatis et ipsum. Aenean purus tellus, pulvinar auctor lectus eu, sodales luctus elit. Suspendisse pharetra mattis justo, id bibendum sem aliquet a. Integer suscipit eu elit tincidunt tempor. Sed placerat rhoncus nisl, eget
          semper lectus feugiat eu. Vivamus eget felis sed est elementum ullamcorper quis sit amet orci. Praesent vel diam vel velit tempor varius. Nunc et mi eget purus egestas congue quis a tellus. Sed interdum sapien lectus, sed tincidunt dolor blandit
          a. Fusce lobortis tempus libero sed vestibulum. Donec fringilla lectus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur a ex ut felis dictum commodo. Integer consectetur elit vitae mattis
          volutpat. Cras tincidunt ex id justo sodales commodo. Maecenas id accumsan orci. Morbi id nibh sit amet nibh rutrum elementum sed ac sem. Integer efficitur ac diam ac tempus. Sed in venenatis metus. Aliquam consectetur purus id enim dictum,
          sed tempor est iaculis. Suspendisse maximus libero id erat dictum blandit. Duis tincidunt maximus tortor, aliquet posuere quam faucibus vitae.
        </p>
      </div>
    </div>
  </main>
</body>
</html>

相关内容

最新更新

热门标签：