Почему моя выпадающая кнопка в навигационной панели больше не работает - PullRequest
Новая
       13

Почему моя выпадающая кнопка в навигационной панели больше не работает

0 голосов
/ 09 апреля 2020

Я сделал панель навигации с выпадающей кнопкой, затем попытался добавить к ней иконки. Но теперь выпадающий список находится не в том месте, и если я нажму или наведу на него курсор, он ничего не сделает. Сначала я попытался добавить иконки из Font Awesome, но они не сработали. Затем я добавил их из Materialise, и они работали нормально. Но с тех пор у меня возникла эта проблема с моей кнопкой выпадающего меню в панели навигации. Может ли кто-нибудь помочь мне с этой проблемой?

Я также скачал CSS файлы с сайта Materialise, но я не буду связывать их, потому что я ничего в них не изменил. 

<script>
		function myFunction() {
		    var x = document.getElementById("myTopnav");
		    if (x.className === "topnav") {
		        x.className += " responsive";
		    } else {
		        x.className = "topnav";
		    }
		}
<script>
/* In CSS, I've changed nothing since that navbar was done without icons: */


/* Navbar */

.topnav,
button {
  list-style-type: none;
  overflow: hidden;
  background-color: #363636;
  box-shadow: 0px 6px 13px -7px rgba(0, 0, 0, 0.20);
  transition: all .2s ease-in;
  font-weight: 700;
}

.topnav-right {
  list-style-type: none;
  overflow: hidden;
  background-color: #363636;
  box-shadow: 0px 6px 13px -7px rgba(0, 0, 0, 0.20);
  transition: all .2s ease-in;
  font-weight: 700;
  float: right;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 24px 26px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  color: #bdbdbd;
}

.topnav .icon {
  display: none;
}


/* Dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 24px 26px;
  background-color: inherit;
  font-family: 'PT Sans', sans-serif;
  font-style: inherit;
  margin: 0;
}


/* Dropdown content (hidden by default) */

.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;
}


/* Links inside the dropdown */

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


/* Background dropdown links */

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


/* Show the dropdown menu on hover */

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

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


/* End Navbar */
image

Изображение навигационной панели:

...