Выпадающее меню не работает при наведении курсора на панель навигации

У меня возникла проблема с раскрывающимся меню. Вещь отказывается отображаться при наведении курсора на «Магазин». Я уже пробовал по-разному (в одних мне почти повезло, в других - нет), но в итоге у меня ничего не получилось.

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("tituloh").style.fontSize = "15px";
    document.getElementById("tituloh").style.marginBottom = "70px";
    document.getElementById("tituloh").style.top = "20px";
    document.getElementById("header").style.paddingBottom = "0px";
    document.getElementById("remove").style.top = "47px";
  } else {
    document.getElementById("tituloh").style.fontSize = "30px";
    document.getElementById("tituloh").style.top = "35px";
    document.getElementById("tituloh").style.marginBottom = "100px"
    document.getElementById("header").style.paddingBottom = "0px";
    document.getElementById("remove").style.top = "50px";
  }
}

#body {
  margin: 0px;
}

#remove {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
}

.order {
  display: inline-block;
}

#remove .opt {
  display: inline-block;
  color: white;
  text-align: center;
  font-size: 24px;
  padding: 14px 16px;
  background-color: black;
  text-decoration: none;
}

#remove .opt:hover,
.dropmenu:hover .dropbutton {
  background-color: white;
  color: black;
}

.dropmenu {
  float: right;
}

.dropmenu .dropbutton {
  font-size: 24px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropcont {
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
}

.dropcont .dropitem {
  text-decoration: none;
  width: 150px;
  height: 30px;
  margin: 5px 0;
  padding-top: 5px;
  padding-left: 5px;
  display: inline-block;
  text-align: left;
}

.dropcont a {
  text-decoration: none;
  color: black;
  font-size: 24px;
}

.dropcont a:hover {
  text-decoration: underline;
  transition: 0.5s;
}

.dropmenu:hover .dropcont {
  display: block;
}

#header {
  left: 0;
  top: 0;
  text-align: center;
  padding: 20px 5px;
  padding-bottom: 0px;
  position: fixed;
  width: 100%;
  margin: 0px;
  padding-left: 0px;
  transition: 0.2s;
  background-color: black;
  background-image: url(header/AvettBrothers-loja.jpg);
  background-repeat: no-repeat;
  background-position: 0 10%;
  background-size: cover;
  z-index: 1;
}

#tituloh {
  position: relative;
  top: 35px;
  text-shadow: -5px 5px 10px #000000;
  font-size: 30px;
  color: white;
  transition: 0.3s;
  margin-bottom: 100px;
}

.sales {
  margin-top: 300px;
}

.thumbnails {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
  position: relative;
  display: inline;
  border: solid red;
  padding: 20px 0;
  margin-bottom: 100px;
}

img.contrast {
  margin: 20px 10px;
  filter: contrast(70%) opacity(90%);
  border: solid blue;
}

.textimgcentro {
  position: absolute;
  left: 0;
  top: -150%;
  width: 100%;
  font-size: 30px;
  text-align: center;
  color: white;
  text-shadow: -10px 5px 10px #000000;
  border: solid black;
}

#top {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8" ; http-equiv = "refresh" content = "5">
  <title>Loja</title>
  <link rel = "stylesheet" type = "text/css" href = "loja/loja.css">
  <script type = "text/javascript" src = "loja/loja.js"></script>
</head>

<body>
  <div id = "header">
    <div id = "tituloh">
      <h1>Store</h1>
    </div>
    <ul id = "remove">
      <li class = "order"><a href = "#link" class = "opt">Home</a></li>
      <li class = "order"><a href = "#link" class = "opt">About</a></li>
      <li class = "order"><a href = "#link" class = "opt">Albuns</a></li>
      <li class = "order"><a href = "#link" class = "opt">Tours</a></li>
      <li class = "dropmenu, order">
        <a href = "#link" class = "dropbutton, opt">
						Store
					</a>

        <div class = "dropcont">

          <a href = "#tshirts" class = "dropitem">T-Shirts</a><br>
          <a href = "#tshirts" class = "dropitem">Jackets</a><br>
          <a href = "#tshirts" class = "dropitem">Posters</a><br>
          <a href = "#tshirts" class = "dropitem">Accessories</a><br>
          <a href = "#tshirts" class = "dropitem">Side Projects</a><br>
          <a href = "#tshirts" class = "dropitem">Kids</a><br>

        </div>
      </li>
      <li class = "order"><a href = "#link" class = "opt">Forum</a></li>
    </ul>
  </div>


  <br/>
  <br/>
  <br/>
  <div class = "sales">Sales</div>

  <div class = "thumbnails">
    <div id = "tshirts">
      <img src = "loja/thumbnails/tshirts.jpg" class = "contrast">
      <div class = "textimgcentro">
        T-Shirts
      </div>

    </div>

    <div id = "casacos">
      <img src = "loja/thumbnails/casacos.jpg" class = "contrast">
      <div class = "textimgcentro">
        Jackets
      </div>
    </div>

    <div id = "posters">
      <img src = "loja/thumbnails/posters.jpg" class = "contrast">
      <div class = "textimgcentro">
        Posters
      </div>
    </div>


    <div id = "acessorios">
      <img src = "loja/thumbnails/acessorio.jpg" class = "contrast">
      <div class = "textimgcentro">
        Accessories
      </div>
    </div>

    <div id = "projects">
      <img src = "loja/thumbnails/project.jpg" class = "contrast">
      <div class = "textimgcentro">
        Side Projects
      </div>
    </div>

    <div id = "kids">
      <img src = "loja/thumbnails/kids.jpg" class = "contrast">
      <div class = "textimgcentro">
        Kids
      </div>
    </div>
  </div>
  </div>
  <br/>
  <br/>
  <br/>

  <div class = "bestsell">

    <div id = "top">
      <h1>Top Products</h1>
    </div>

  </div>

  <hr id = "cont"> Contactos Oficiais: <br /><br />
  <a href = "https://www.facebook.com/theavettbrothers/" ; target = "_blank"><img src = "loja/Contactos/facebook.png" ; height = "50" ; width = "50" ; title = "Facebook" ; alt = "Link para Facebook"></a>

  <a href = "https://www.instagram.com/theavettbrothers/" target = "_blank"><img src = "loja/Contactos/insta.png" ; height = "50" ; width = "50" ; title = "Instagram" ; alt = "Link para Instagram"></a>

  <a href = "https://twitter.com/theavettbros" target = "_blank"><img src = "loja/Contactos/twitter.png" ; height = "50" ; width = "50" ; title = "Twitter" ; alt = "Link para Twitter"></a>

  <a href = "https://www.theavettbrothers.com/%22target=%22_blank%22%3E<img src = " loja/Contactos/site.png "; height = "50 "; width = "50 "; title = "website "; alt = "Link para website "></a>

</body>
</html>

Как я могу это исправить?

Кроме того, как сделать так, чтобы при наведении курсора на раскрывающееся меню «Магазин» оставался с белым фоном и черным текстом?

Спасибо!

«Чтобы указать несколько классов, разделите имена классов пробелом» - w3schools.com/tags/att_global_class.asp (Попробуйте удалить запятые и повторите попытку ...)

— 17.12.2018 21:05

удаление запятых между классами, и без float: right для .dropmenu все работает нормально: jsfiddle.net/jimmyLi/utqrj1vh

— 17.12.2018 21:14

javascript html css

17.12.2018 20:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

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

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Как разместить две гиперссылки рядом друг с другом?

Как настроить таргетинг на текущий сфокусированный элемент из массива для вызова функции фокусировки?

Проблемы с загрузкой 3d модели на моем хостинге

Django - таймер обратного отсчета

Мне нужна помощь в исправлении бесконечного цикла

Наличие подменю второго уровня, встроенного в основную навигацию

Как установить html id в переменную

Как отладить ошибку при разработке слайдера для прокрутки всех изображений?

Невозможно изменить атрибуты id или src внутри тега img, используя только Javascript

React relative href не работает должным образом

Выпадающее меню не работает при наведении курсора на панель навигации

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

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