Выпадающий вопрос, вероятно, ошибка новичка

Question

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

Я бы не хотел использовать Bootstrap, чтобы лучше понять, как все работает.

.flex-container {
  margin: auto;
  background-color: #ffffff;
  min-height: 100%;
}

.header {
  background-color: #ffffff;
  margin: auto;
  height: 100px;
  position: relative;
}

.header__logo {
  width: 250px;
  height: auto;
  position: absolute;
  top: 10px;
  left: 0;
}

.navcontainer {
  margin: auto;
  background-color: #ffffff;
}

.navcontainer__active {
  background-color: #4d4d4d;
}

.navcontainer__dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.navcontainer__dropdown-content:hover {
  background-color: #4d4d4d;
}

.navcontainer__dropdown-content_dropdown-link {
  color: #1a1a1a;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.navcontainer__dropdown:hover .navcontainer__dropdown__dropdown-content {
  display: block;
}

.navcontainer__navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1a1a1a;
  max-width: 95%;
  margin: auto;
}

.navcontainer__item {
  float: left;
}

.navcontainer__link {
  display: block;
  padding: 8px;
  color: #f2f2f2;
  text-align: center;
  padding: 9px 13px;
  text-decoration: none;
}

.navcontainer__link:hover {
  background-color: #4d4d4d;
}

.wrapper {
  margin: auto;
  max-width: 95%;
  -webkit-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-image: url("/src/images/news.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBYTtFQUNiLDBCQUEwQjtFQUMxQixpQkFBaUI7Q0FDbEI7O0FBRUQ7RUFDRSwwQkFBMEI7RUFDMUIsYUFBYTtFQUNiLGNBQWM7RUFDZCxtQkFBbUI7Q0FDcEI7O0FBRUQ7RUFDRSxhQUFhO0VBQ2IsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixVQUFVO0VBQ1YsUUFBUTtDQUNUOztBQUVEO0VBQ0UsYUFBYTtFQUNiLDBCQUEwQjtDQUMzQjs7QUFFRDtFQUNFLDBCQUEwQjtDQUMzQjs7QUFFRDtFQUNFLGNBQWM7RUFDZCxtQkFBbUI7RUFDbkIsMEJBQTBCO0VBQzFCLGlCQUFpQjtFQUNqQix3REFBZ0Q7RUFBaEQsZ0RBQWdEO0VBQ2hELFdBQVc7Q0FDWjs7QUFFRDtFQUNFLDBCQUEwQjtDQUMzQjs7QUFFRDtFQUNFLGVBQWU7RUFDZixtQkFBbUI7RUFDbkIsc0JBQXNCO0VBQ3RCLGVBQWU7RUFDZixpQkFBaUI7Q0FDbEI7O0FBRUQ7RUFDRSxlQUFlO0NBQ2hCOztBQUVEO0VBQ0Usc0JBQXNCO0VBQ3RCLFVBQVU7RUFDVixXQUFXO0VBQ1gsaUJBQWlCO0VBQ2pCLDBCQUEwQjtFQUMxQixlQUFlO0VBQ2YsYUFBYTtDQUNkOztBQUVEO0VBQ0UsWUFBWTtDQUNiOztBQUVEO0VBQ0UsZUFBZTtFQUNmLGFBQWE7RUFDYixlQUFlO0VBQ2YsbUJBQW1CO0VBQ25CLGtCQUFrQjtFQUNsQixzQkFBc0I7Q0FDdkI7O0FBRUQ7RUFDRSwwQkFBMEI7Q0FDM0I7O0FBRUQ7RUFDRSxhQUFhO0VBQ2IsZUFBZTtFQUNmLHNEQUE4QztFQUE5Qyw4Q0FBOEM7Q0FDL0M7O0FBRUQ7RUFDRSw4Q0FBOEM7RUFDOUMsdUJBQXVCO0VBQ3ZCLDZCQUE2QjtDQUM5QiIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mbGV4LWNvbnRhaW5lciB7XG4gIG1hcmdpbjogYXV0bztcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgbWluLWhlaWdodDogMTAwJTtcbn1cblxuLmhlYWRlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gIG1hcmdpbjogYXV0bztcbiAgaGVpZ2h0OiAxMDBweDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4uaGVhZGVyX19sb2dvIHtcbiAgd2lkdGg6IDI1MHB4O1xuICBoZWlnaHQ6IGF1dG87XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAxMHB4O1xuICBsZWZ0OiAwO1xufVxuXG4ubmF2Y29udGFpbmVyIHtcbiAgbWFyZ2luOiBhdXRvO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xufVxuXG4ubmF2Y29udGFpbmVyX19hY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNGQ0ZDRkO1xufVxuXG4ubmF2Y29udGFpbmVyX19kcm9wZG93bi1jb250ZW50IHtcbiAgZGlzcGxheTogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICBtaW4td2lkdGg6IDE2MHB4O1xuICBib3gtc2hhZG93OiAwcHggOHB4IDE2cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiAgei1pbmRleDogMTtcbn1cblxuLm5hdmNvbnRhaW5lcl9fZHJvcGRvd24tY29udGVudDpob3ZlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM0ZDRkNGQ7XG59XG5cbi5uYXZjb250YWluZXJfX2Ryb3Bkb3duLWNvbnRlbnRfZHJvcGRvd24tbGluayB7XG4gIGNvbG9yOiAjMWExYTFhO1xuICBwYWRkaW5nOiAxMnB4IDE2cHg7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG5cbi5uYXZjb250YWluZXJfX2Ryb3Bkb3duOmhvdmVyIC5uYXZjb250YWluZXJfX2Ryb3Bkb3duX19kcm9wZG93bi1jb250ZW50IHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbi5uYXZjb250YWluZXJfX25hdmJhciB7XG4gIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWExYTFhO1xuICBtYXgtd2lkdGg6IDk1JTtcbiAgbWFyZ2luOiBhdXRvO1xufVxuXG4ubmF2Y29udGFpbmVyX19pdGVtIHtcbiAgZmxvYXQ6IGxlZnQ7XG59XG5cbi5uYXZjb250YWluZXJfX2xpbmsge1xuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogOHB4O1xuICBjb2xvcjogI2YyZjJmMjtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBwYWRkaW5nOiA5cHggMTNweDtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuXG4ubmF2Y29udGFpbmVyX19saW5rOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzRkNGQ0ZDtcbn1cblxuLndyYXBwZXIge1xuICBtYXJnaW46IGF1dG87XG4gIG1heC13aWR0aDogOTUlO1xuICBib3gtc2hhZG93OiAwcHggMHB4IDIwcHggMCByZ2JhKDAsIDAsIDAsIDAuMik7XG59XG5cbmJvZHkge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCIvc3JjL2ltYWdlcy9uZXdzLmpwZ1wiKTtcbiAgYmFja2dyb3VuZC1zaXplOiBjb3ZlcjtcbiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbn1cbiJdfQ== */

<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>News Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./dist/css/styles.css">
<head>
	
</head>

<body>

<div class="wrapper">

<header class="header"> 
	<img src="src/images/logo.png" class="header__logo" alt="Logo">
</header>

<div class="navcontainer">
	<ul class="navcontainer__navbar">
		<li class="navcontainer__item navcontainer__active"><a class="navcontainer__link" href="#home">Home</a></li>
		<li class="navcontainer__item">
			<a class="navcontainer__link navcontainer__dropdown" href="javascript:void(0)">Categories</a>
		  <div class="navcontainer__dropdown-content">
			<a class="navcontainer__dropdown-link" href="#">Politics</a>
			<a class="navcontainer__dropdown-link" href="#">Sports</a>
			<a class="navcontainer__dropdown-link" href="#">Finance</a>
		  </div>
		</li>
		<li class="navcontainer__item"><a class="navcontainer__link" href="#contact">Contact</a></li>
		<li class="navcontainer__item"><a class="navcontainer__link" href="#about">About</a></li>
	</ul>
</div>

<div class="flex-container">
	Hello World!
	
</div>

</div>
</body>

</html>

Answer 1

Глядя на ваш CSS, это выглядит как ошибка печати с вашей стороны.

.navcontainer__dropdown:hover .navcontainer__dropdown__dropdown-content {
  display: block;
}

Похоже, у вас есть дополнительное выпадающее слово там. попробовать

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

Answer 2

Я добавил немного CSS, пожалуйста, проверьте его.

Ваш выпадающий элемент является дочерним по отношению к тегу li, так что ниже css не будет работать для этого

.navcontainer__dropdown:hover .navcontainer__dropdown__dropdown-content {
  display: block;
}

Вместо этого используйте:

.navcontainer__item:hover .navcontainer__dropdown-content {
  background-color: #4d4d4d;
  display: block;
}

Также вам необходимо удалить переполнение для ul, иначе вы не сможете отобразить выпадающий список.

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

.flex-container {
  margin: auto;
  background-color: #ffffff;
  min-height: 100%;
}

.header {
  background-color: #ffffff;
  margin: auto;
  height: 100px;
  position: relative;
}

.header__logo {
  width: 250px;
  height: auto;
  position: absolute;
  top: 10px;
  left: 0;
}

.navcontainer {
  margin: auto;
  background-color: #ffffff;
}

.navcontainer__active {
  background-color: #4d4d4d;
}

.navcontainer__dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  left: 0; /*New css added */
  top: 100%; /*New css added */
}

/*New css added */
.navcontainer__item:hover .navcontainer__dropdown-content {
  background-color: #4d4d4d;
  display: block;
}

/*New css added */
.navcontainer__dropdown-content a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
}
/*New css added */
.navcontainer__dropdown-content a:hover {
  color: red;
}

.navcontainer__dropdown-content_dropdown-link {
  color: #1a1a1a;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.navcontainer__dropdown:hover .navcontainer__dropdown__dropdown-content {
  display: block;
}

.navcontainer__navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #1a1a1a;
  max-width: 95%;
  margin: auto;
}
.navcontainer__navbar:after{
  content:"";
  display: table;
  clear: both;
}
.navcontainer__item {
  float: left;
  position: relative;
}

.navcontainer__link {
  display: block;
  padding: 8px;
  color: #f2f2f2;
  text-align: center;
  padding: 9px 13px;
  text-decoration: none;
}

.navcontainer__link:hover {
  background-color: #4d4d4d;
}

.wrapper {
  margin: auto;
  max-width: 95%;
  -webkit-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-image: url("/src/images/news.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>News Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./dist/css/styles.css">

<head>
</head>

<body>
    <div class="wrapper">
        <header class="header">
            <img src="src/images/logo.png" class="header__logo" alt="Logo">
        </header>
        <div class="navcontainer">
            <ul class="navcontainer__navbar">
                <li class="navcontainer__item navcontainer__active"><a class="navcontainer__link" href="#home">Home</a></li>
                <li class="navcontainer__item">
                    <a class="navcontainer__link navcontainer__dropdown" href="javascript:void(0)">Categories</a>
                    <div class="navcontainer__dropdown-content">
                        <a class="navcontainer__dropdown-link" href="#">Politics</a>
                        <a class="navcontainer__dropdown-link" href="#">Sports</a>
                        <a class="navcontainer__dropdown-link" href="#">Finance</a>
                    </div>
                </li>
                <li class="navcontainer__item"><a class="navcontainer__link" href="#contact">Contact</a></li>
                <li class="navcontainer__item"><a class="navcontainer__link" href="#about">About</a></li>
            </ul>
        </div>
        <div class="flex-container">
            Hello World!
        </div>
    </div>
</body>

</html>