堆棧內存溢出
  簡體   English   中英

懸停鏈接時不顯示 CSS 下拉菜單

[英]CSS dropdown menu doesn't display when link is hovered

 原文  2016-09-29 07:49:11  8   4    html/ css

問題描述

我的純 CSS 下拉菜單有點問題，當我向頁腳和容器 div 添加 CSS 屬性時，子菜單不會保持顯示。

我真的不知道如何解決這個問題，我試過在谷歌上尋找答案，但找不到任何可以解決我的問題的答案。

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

這是jsfiddle鏈接

先感謝您

編輯：感謝您的回答問題已解決。 謝謝大家的幫助和解答

4 個解決方案

解決方案1
 1  2016-09-29 07:56:00

您需要做的就是添加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>INF 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

解決方案2
 1 已采納  2016-09-29 07:56:33

添加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>INF 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>

解決方案3
 0  2016-09-29 08:38:28

使用position:relative;將相對位置添加到父li position:relative;

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

解決方案4
 -1  2016-09-29 07:55:49

您只需要添加以下內容： nav ul li:hover > a,當懸停li ，第一個錨點也會突出顯示。

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

JSFiddle

編輯：我希望我沒有誤解你的問題:)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS 菜單懸停時不下拉 懸停任何子項時更改CSS下拉菜單的顏色 CSS下拉菜單在以下情況下不顯示 <li> -元素懸停。 懸停時不出現下拉菜單 包含CSS3下拉菜單在IE中不起作用 將鼠標懸停在CSS按鈕上沒有響應 為什么這個下拉菜單沒有正確顯示？ CSS下拉菜單在IE 8中不起作用 html &amp;&amp; CSS-下拉菜單沒有出現 懸停時下拉菜單不顯示列出的元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM