个人中心
gpt4 book ai didi

html - 下拉菜单不出现

转载 作者：行者123 更新时间：2023-11-28 01:42:34 24 4
gpt4 key购买 nike

我正在尝试让我的下拉菜单正常工作，但由于某种原因，它没有出现在浏览器中。

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

我用了w3school寻求帮助(虽然他们没有使用列表，这是一项要求)和一个来 self friend 的模板，我什至将其复制粘贴到我的 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

非常感谢您的帮助!

最佳答案

我假设您希望仅在父链接被覆盖时才显示 .main2 菜单。2个变化:1) 使子 ul 标签成为 li 的一部分(嵌套它)2) 改变:hover 的显示逻辑作用于子元素(.main li:hover > ul)

结果:

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

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

关于html - 下拉菜单不出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50360223/

24 4 0
文章推荐： Javascript 幻灯片褪色问题 - 不无缝
文章推荐： javascript switch/case 在读取文件之前中断
文章推荐： javascript - Angular JS-尝试创建视频选择器 "angular way"
文章推荐： javascript - 删除按钮不起作用