Проблема с изменением положения панели навигации

Я создавал свой веб-сайт и заметил, что моя панель навигации с выпадающими списками расположена намного ниже, чем я хотел. Я быстро попытался использовать несколько различных методов, таких как поля и отступы, position: fixed и position: absolute и установка расстояния от верха, но это просто удалило мои выпадающие списки. Мне любопытно узнать, почему это произошло и что я могу сделать, чтобы исправить свой код.

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>

Где вы хотите навигацию с положением выпадающих списков.

— 18.02.2019 14:03

html css navigation position navbar

18.02.2019 13:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

у вас есть пробел из-за нежелательного поля и тега 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>

Да, спасибо за этот ответ. Но на предыдущих веб-сайтах я сделал тег h1 над панелью навигации, и это, похоже, сработало. Я действительно не хочу делать свой тег h1 под панелью навигации из-за эстетики. Впрочем, если других вариантов нет, то так и сделаю.

— 18.02.2019 14:09

визуально, где вы хотите, чтобы ваш заголовок отображался, под навигационной панелью или над навигационной панелью?

— 18.02.2019 14:12

Над панелью навигации

— 18.02.2019 14:16

раньше это было только так, но текст имеет белый цвет, поэтому вы думали, что это огромный разрыв над навигационной панелью

— 18.02.2019 14:21

Вау! ты сделал это! Спасибо за помощь!

— 18.02.2019 14:26

рад, что смог помочь. Если это решило вашу проблему, вы можете отметить это как ответ, нажав на галочку слева от этого ответа.

— 18.02.2019 14:30

18.02.2019 14:04

Попробуйте добавить normalize.css или reset.css, которые помогут вам начать работу над каждым проектом с одинаковыми стилями в каждом браузере:

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

18.02.2019 14:12

вы можете заглянуть в бутстрап.
с помощью начальной загрузки вы можете легко создать красивую и чистую веб-страницу.

загрузочные документы

Я думаю, что приведенный ниже 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>

18.02.2019 14:53

Другие вопросы по теме

Точное позиционирование шрифта — как получить шрифт на его базовой линии?

Локальная проблема с фоновым прикреплением CSS и нижняя позиция с Edge/IE

Почему мой нижний колонтитул прыгает в центр страницы, когда я меняю ширину окна?

Условная форма скрывает первый класс, но не второй класс выбора

Модальное окно заставляет тело родительской страницы прокручиваться вверх

БЭМ: добавление модификатора к уже существующему модификатору

Как всегда отображать HTML-файл и вставлять в него новые страницы?

В чем проблема с меню гамбургеров jquery?

IncludeByState и включает фильтр, не работающий с ngClass

Стилизация p-selectButton

Проблема с изменением положения панели навигации

Ответы 3

Другие вопросы по теме

Похожие вопросы