下拉问题，可能是菜鸟错误

时间：2018-11-14 12:49:45

标签： html css drop-down-menu dropdown

我在编码方面还比较陌生，我正在尝试创建一个下拉菜单，但似乎无法使其正常工作。我在这里看到了类似的问题，并通读了几乎所有问题，但由于对此感到陌生，因此我无法对我的代码应用任何这些答案，因此这就是为什么我认为更具个性化的答案将是我的一种好方法了解发生了什么。这可能是我对下拉菜单不了解的内容，或者是我找不到的愚蠢的错字，因此不胜感激。特别是任何可以使我理解错误的帮助。

我想避免使用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>

2 个答案:

答案 0 :(得分：1)

我添加了一些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>

答案 1 :(得分：0)

看看您的CSS，看来您是打字错误。

<string name="hello_world">Hello world! &#128513;</string>
// this is using in decimal

好像您在其中还有一个下拉字样。尝试

.navcontainer__dropdown:hover .navcontainer__dropdown__dropdown-content {
  display: block;
}
相关问题
最新问题