Question

我想让我的下拉菜单正常工作，但出于某种原因，它不会出现在浏览器中。

我已经检查了其他问题，但找不到问题的原因。我已经从父列表中删除了 overflow：hidden ，即使我在导航栏中的渐变因此而消失，我也不知道如何修复它。

我使用w3school寻求帮助（尽管他们没有使用列表，这是一项要求）以及我的一位朋友的模板，我甚至将其复制到我的CSS中并且仍然没有工作。

好的，所以为了您的参考，这里有CSS和HTML：

body {font-family: "Century Gothic", "Trebuchet MS";
		width: 780px;
		margin: auto;
		background-color: #555555}

#site {background-color: white;
		padding: 10px;}

/** My Friend's CSS that didn't work either

.main li {list-style-type: none; 
		float: left; 
		width: 150px; 
		background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
		text-align: center;}

.main li:hover {color: white;}

.main2 li {display: none; 
		background-color: lightgrey; 
		color: black;}
.main2 li:hover {background-color: grey; 
				color: white;}

.main li:hover .main2 li {display: block;}**/




.main {list-style-type: none;
		background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
		width: 100%}

.main li {display: block;
		float: left;
		position: relative}

.main li a {display: block;
		position: relative;
		padding: 6px 12px 5px 10px;
		font-weight: 900;
		font-size: 14px;
		height: 20px;
		text-align: center;}

.main a {text-decoration: none;
		color: black;}

.main2 li {position: absolute;
			display: none;
			width: 100%
			}
.main li a:hover .main2 li {display: block;}

.main2 li a {color: black;
    		text-decoration: none;
    		display: block;}

<body>
	<div id="site">
	<nav>
		<ul class="main">
			<li><a href="#">Home</a></li>
			<li><a href="#">Über mich</a></li>
			<li><a href="#">Blog</a></li>
				<ul class="main2">
					<li><a href="#">2015</a></li>
					<li><a href="#">2016</a></li>
					<li><a href="#">2017</a></li>
				</ul>
			<li><a href="#">Forum</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Links</a></li>
				<ul class="main2">
					<li><a href="#">facebook</a></li>
					<li><a href="#">Insta</a></li>
					<li><a href="#">Twitter</a></li>
				</ul>
		</ul>
	</nav>

另外，这里有一个截图，显示网站目前的样子（我只包含了HTML的重要部分，因为我实际上没有在CSS中格式化网站的其余部分

screenshot

非常感谢你的帮助！

Answer 1

这是一个解决方案，我评论了更改后的代码。问题是，您的<ul class="main2">与其他无效的li处于同一级别。

我也改变了这行css

.main li a:hover .main2 li {display: block;}

到

.main li:hover .main2 li  {display: block;}

修改

对于渐变问题，请在display: inline-block;

上使用main

＆＃13;

body {font-family: "Century Gothic", "Trebuchet MS";
		width: 780px;
		margin: auto;
		background-color: #555555}

#site {background-color: white;
		padding: 10px;}

.main {list-style-type: none;
		background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
        display: inline-block; // <-- here
		width: 100%}

.main li {display: block;
		float: left;
		position: relative}

.main li a {display: block;
		position: relative;
		padding: 6px 12px 5px 10px;
		font-weight: 900;
		font-size: 14px;
		height: 20px;
		text-align: center;}

.main a {text-decoration: none;
		color: black;}

.main2 li {position: absolute;
			display: none;
			width: 100%
			}
      
/*Changed this part*/
.main li:hover .main2 li  {display: block;}

.main2 li a {color: black;
    		text-decoration: none;
    		display: block;}

＆＃13;

<div id="site">
	<nav>
		<ul class="main">
			<li><a href="#">Home</a></li>
			<li><a href="#">Über mich</a></li>
			<li>
        <a href="#">Blog</a>
        <!-- Move this inside li -->
				<ul class="main2">
					<li><a href="#">2015</a></li>
					<li><a href="#">2016</a></li>
					<li><a href="#">2017</a></li>
				</ul>      
      </li>

			<li><a href="#">Forum</a></li>
			<li><a href="#">Kontakt</a></li>
			<li>
        <a href="#">Links</a>
        <!-- Move this inside li -->
        <ul class="main2">
					<li><a href="#">facebook</a></li>
					<li><a href="#">Insta</a></li>
					<li><a href="#">Twitter</a></li>
				</ul>
      </li>
		</ul>
	</nav>
</div>

＆＃13;

Answer 2

我假设您只希望在覆盖父链接时显示.main2菜单。 2个变化： 1）制作一个孩子ul标签的一部分li（嵌套它） 2）更改显示逻辑：hover以对子元素进行操作（.main li：hover＆gt; ul）

结果：

＆＃13;

.main {
  list-style-type: none;
  background-image: linear-gradient(  rgba(240,240,240,1),  rgba(240,240,240,0) );
  width: 100%;
  display:flex;
}

.main li {
  display: block;
  float: left;
  position: relative;
}

.main li a {
  display: block;
  position: relative;
  padding: 6px 12px 5px 10px;
  font-weight: 900;
  font-size: 14px;
  height: 20px;
  text-align: center;
}

.main a {
  text-decoration: none;
  color: black;
}

.main2 {
  width: 100%;
  display:none;
  position: absolute;
  padding:0;
}

.main2 li {
  width: 100%;
}

.main li:hover > ul {
  display: block;
}

.main2 li a {
  color: black;
  text-decoration: none;
  display: block;
}

＆＃13;

<div id="site">
	<nav>
		<ul class="main">
			<li><a href="#">Home</a></li>
			<li><a href="#">Über mich</a></li>
			<li><a href="#">Blog</a>
				<ul class="main2">
					<li><a href="#">2015</a></li>
					<li><a href="#">2016</a></li>
					<li><a href="#">2017</a></li>
				</ul>
        </li>
			<li><a href="#">Forum</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Links</a>
				<ul class="main2">
					<li><a href="#">facebook</a></li>
					<li><a href="#">Insta</a></li>
					<li><a href="#">Twitter</a></li>
				</ul>
        </li>
		</ul>
	</nav>

＆＃13;

如果您正在考虑优化样式，这是我的版本，选择器较少： https://codepen.io/VsevolodTS/pen/KRxeRL

下拉菜单不会出现

2 个答案:

修改