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

时间：2016-09-29 07:49:12

标签： html css

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

提前谢谢

编辑：感谢您的回答，问题得到了解决。谢谢大家的帮助和解答

4 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
*{
	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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

此外，您的br代码的斜杠位于错误的位置 - 它们应位于br

之后

答案 1 :(得分：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>

答案 2 :(得分：0)

使用li

向父position:relative;添加相对位置 
nav ul li{
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    text-align: center;
    background: #5d5d5d;
    position:relative;
}

答案 3 :(得分：-1)

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

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

<强> JSFiddle

编辑：我希望我没有理解你的问题：）

相关问题
最新问题