首页 文章

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

提问于
浏览 次
-1

我的纯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

先感谢您

编辑：谢谢你的答案，问题得到解决 . 谢谢大家的帮助和解答

html css

4 回答

  • 1

    将 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>
    回复于
  • 1

    您需要做的就是将 position:relative; 添加到 nav ul li ：

    *{
	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;
  position:relative;
}

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

    <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>

    另外，你的 br 标签在错误的地方有斜线 - 它们应该在 br 之后

    回复于
  • 0

    使用 position:relative; 向父 li 添加相对位置

    nav ul li{
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    text-align: center;
    background: #5d5d5d;
    position:relative;
}
    回复于
  • -1

    您只需添加以下内容： nav ul li:hover > a, 当悬停 li 时，第一个锚点也会突出显示 .

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

    JSFiddle

    编辑：我希望我没有错过了解你的问题:)

    回复于

相关问题