个人中心
gpt4 book ai didi

html - 悬停链接时不显示 CSS 下拉菜单

转载 作者：行者123 更新时间：2023-11-28 17:26:18 25 4
gpt4 key购买 nike

我的纯 CSS 下拉菜单有点问题，当我将 CSS 属性添加到页脚和容器 div 时，子菜单不会保持显示。

我真的不知道如何解决这个问题，我尝试在谷歌上寻找答案，但我找不到任何可以解决我的问题的答案。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: OpenSans, Noto, Helvetica Neue, Helvetica, Tahoma, Arial, FreeSans, sans-serif;
}
header {
  position: relative;
  width: 100%;
  height: 110px;
  background: #505050;
  padding: 5px;
}
#logo {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #00c308;
  padding: 5px;
  padding-top: 55px;
  color: white;
  font-weight: bold;
  font-size: 12px;
}
nav {
  display: flex;
  justify-content: center;
  border-top: 1px #D1D1D1 solid;
  position: static;
  width: 100%;
  height: 50px;
  background: #5d5d5d;
  box-shadow: 0px 3px 3px grey;
}
#menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1080px;
}
nav ul {
  display: flex;
  max-width: 1080px;
  width: 100%;
  height: 49px;
  list-style: none;
}
nav ul li {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  text-align: center;
  background: #5d5d5d;
}
nav ul li a {
  box-sizing: content-box;
  padding: 11px 0px;
  width: 100%;
  font-family: "Segoe UI", "Helvetica Neue";
  text-decoration: none;
  color: #EEEEEE;
  font-size: 20px;
  font-weight: 100;
}
.sous_menu {
  display: none;
  max-width: 1080px;
  width: 100%;
  background: white;
  box-shadow: 0px 0px 10px grey;
}
.sous_menu a {
  color: black;
}
.sous_menu a:hover {
  background: #00ce08;
}
nav ul li a:hover {
  color: white;
  background: #00c308;
}
nav ul li:hover>.sous_menu {
  display: flex;
  flex-direction: column;
}
#container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  width: 100%;
  background: red;
  min-height: 700px;
}
footer {
  height: 100px;
  width: 100%;
  background: #505050;
}

here is the jsfiddle link

提前致谢

编辑:感谢您的回答，问题已解决。谢谢大家的帮助和回答

最佳答案

添加position: relative;到.sous_menu

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: OpenSans,Noto,Helvetica Neue,Helvetica,Tahoma,Arial,FreeSans,sans-serif;
}

header{
	position:relative;
	width: 100%;
	height: 110px;
	background: #505050;
	padding: 5px;
}

#logo{
	position: absolute;
	width: 100px;
	height: 100px;
	background: #00c308;
	padding: 5px;
	padding-top: 55px;
	color: white;
	font-weight: bold;
	font-size: 12px;
}

nav{
	display: flex;
	justify-content: center;
	border-top: 1px #D1D1D1 solid;
	position: static;
	width: 100%;
	height: 50px;
	background: #5d5d5d;
	box-shadow: 0px 3px 3px grey;
}

#menu{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
}

nav ul{
	display: flex;
	max-width: 1080px;
	width: 100%;
	height: 49px;
	list-style: none;
}

nav ul li{
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	text-align: center;
	background: #5d5d5d;
}

nav ul li a{
	box-sizing: content-box;
	padding: 11px 0px;
	width:100%;
	font-family: "Segoe UI","Helvetica Neue" ;
	text-decoration: none;
	color: #EEEEEE;
	font-size: 20px;
	font-weight: 100;
}

.sous_menu{
	display: none;
    position: relative;
	max-width: 1080px;
	width: 100%;
	background: white;
	box-shadow: 0px 0px 10px grey;
}

.sous_menu a{
	color: black;
}

.sous_menu a:hover{
	background: #00ce08;
}

nav ul li a:hover{
	color: white;
	background: #00c308;
}

nav ul li:hover>.sous_menu{
	display: flex;
	flex-direction: column;
}

#container{
	display:flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
	width: 100%;
	background: red;
	min-height: 700px;
}

footer{
	height: 100px;
	width: 100%;
	background: #505050;
}
	<body>
		<header>
			<div id="logo">T</br>N</br>I N F O</div>
		</header>
		
		<nav>
			<div id="menu">
				<ul>
					<li>
						<a href="#">Ordinateurs</a>
						<div class="sous_menu">
							<a href="#">PC de Bureau</a>
							<a href="#">PC Portables</a>
							<a href="#">Accessoires</a>
						</div>
					</li>
					<li>
						<a href="#">Peripheriques</a>
						<div class="sous_menu">
							<a href="#">Link 1</a>
							<a href="#">Link 2</a>
							<a href="#">Link 3</a>
						</div>
					</li>
					<li>
						<a href="#">Hardware</a>
						<div class="sous_menu">
							<a href="#">Link 1</a>
							<a href="#">Link 2</a>
							<a href="#">Link 3</a>
						</div>
					</li>
					<li>
						<a href="#">Software</a>
						<div class="sous_menu">
							<a href="#">Link 1</a>
							<a href="#">Link 2</a>
							<a href="#">Link 3</a>
						</div>
					</li>
				</ul>
				
				
			</div>
		</nav>
		
		<div id="container">
			<div id="news">
			</div>
			
			
		</div>
		
		<footer>
		</footer>

关于html - 悬停链接时不显示 CSS 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39764382/

25 4 0
文章推荐： javascript - 如何在另一个文件的html上加载js Action
文章推荐： jQuery:激活/悬停第一个选项卡
文章推荐： javascript - 使用不同的 css 文件更改类的颜色
文章推荐： html - 如何设置 textarea 位于底部并
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com