CSS - 懸停UL項目不在垂直線

我是全新的HTML和CSS，現在我正在關注this教程。我的問題see picture是我的下拉列表中的項目不是垂直線，而是全部混亂在一起。CSS - 懸停UL項目不在垂直線

我敢肯定，這是一個簡單的問題，有一個簡單的解決方案，但我沒有取得任何進展找一個......

我會爲一些建議，非常感謝！ :)

* { 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p { 
 
    margin-bottom: 10px; 
 
} 
 

 
/* ----- NAVIGATION BAR ----- */ 
 

 
#nav { 
 
    width:500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    background-color: none; 
 
} 
 

 
#nav ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
#nav ul:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-family: "Trocchi", serif; 
 
} 
 

 
#nav ul li:hover { 
 
    background: #76C5CF; 
 
} 
 

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

 
#nav ul ul { 
 
    display: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
#nav ul li:hover > ul { 
 
    display: block; 
 
} 
 

 
/* ----- HEADER ----- */ 
 

 
#header { 
 
    width: 340px 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
#header h1 { 
 
    height: 50px; 
 
    font-family: "Trocchi", serif; 
 
    background-color: 
 
} 
 

 
#header h2 { 
 
    font-family: "Trocchi", serif; 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
/* ----- BACKGROUND ----- */ 
 
body { 
 
    background-color: #A6D7F3; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title> Harley's Haunts </title> 
 
    <link rel="stylesheet" type="text/css" href="harleysHaunts.css"> 
 
    <style> 
 
    @import url('https://fonts.googleapis.com/css?family=Trocchi'); 
 
    </style> 
 
</head> 
 

 
    <body> 
 

 
     <div id="header"> 
 

 
     <h1> HARLEY'S HAUNTS </h1> 
 
     <h2> It's a dog's world after all </h2> 
 

 
     </div> 
 

 
     <div id="nav"> 
 
     <ul> 
 
      <li><a href="#"> About </a></li> 
 
      <li><a href="#"> Pet-Friendly Venues </a> 
 
      <ul> 
 
       <li><a href="#"> Cafes </a> </li> 
 
       <li><a href="#"> Restaurants </a> </li> 
 
       <li><a href="#"> Pubs/Bars </a> </li> 
 
       <li><a href="#"> Shops </a> </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#"> Contact </a></li> 
 
     </ul> 
 

 

 
     </div> 
 

 
    </body> 
 

 
</html>

來源

2016-11-22 Bambi

使用'在線嘗試-block'而不是'inline-table'。 –

不幸的是，這並沒有解決問題。但是，謝謝你的建議！事實證明，我需要在我的「#nav ul li {」 – Bambi

所有您需要做的就是添加position:relative到#nav UL李：

#nav ul li { 
     float: left; 
     position: relative; 
    }

，但你應該使用這個只爲李父並且你不應該在ul孩子的孩子中使用float:left。

所以你CSS會變成這個樣子

#nav > ul > li { 
    float: left; 
    position: relative; 
}

來源

2016-11-22 14:39:13 Chiller

「它的工作 - hoorah！：D非常感謝你這麼快回答我的問題！ – Bambi

歡迎您如果有幫助！你可以把它標記爲答案:)。 – Chiller

完成！我不得不等待7分鐘的倒計時：P – Bambi

特定寬度添加到#nav ul ul，給了它200像素爲例考慮父ulwidth

* { 
 
    margin: 0; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p { 
 
    margin-bottom: 10px; 
 
} 
 

 
/* ----- NAVIGATION BAR ----- */ 
 

 
#nav { 
 
    width:500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    background-color: none; 
 
} 
 

 
#nav ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
#nav ul:after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-family: "Trocchi", serif; 
 
} 
 

 
#nav ul li:hover { 
 
    background: #76C5CF; 
 
} 
 

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

 
#nav ul ul { 
 
    display: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 200px; 
 
} 
 

 
#nav ul li:hover > ul { 
 
    display: block; 
 
} 
 

 
/* ----- HEADER ----- */ 
 

 
#header { 
 
    width: 340px 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
#header h1 { 
 
    height: 50px; 
 
    font-family: "Trocchi", serif; 
 
    background-color: 
 
} 
 

 
#header h2 { 
 
    font-family: "Trocchi", serif; 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
/* ----- BACKGROUND ----- */ 
 
body { 
 
    background-color: #A6D7F3; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title> Harley's Haunts </title> 
 
    <link rel="stylesheet" type="text/css" href="harleysHaunts.css"> 
 
    <style> 
 
    @import url('https://fonts.googleapis.com/css?family=Trocchi'); 
 
    </style> 
 
</head> 
 

 
    <body> 
 

 
     <div id="header"> 
 

 
     <h1> HARLEY'S HAUNTS </h1> 
 
     <h2> It's a dog's world after all </h2> 
 

 
     </div> 
 

 
     <div id="nav"> 
 
     <ul> 
 
      <li><a href="#"> About </a></li> 
 
      <li><a href="#"> Pet-Friendly Venues </a> 
 
      <ul> 
 
       <li><a href="#"> Cafes </a> </li> 
 
       <li><a href="#"> Restaurants </a> </li> 
 
       <li><a href="#"> Pubs/Bars </a> </li> 
 
       <li><a href="#"> Shops </a> </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#"> Contact </a></li> 
 
     </ul> 
 

 

 
     </div> 
 

 
    </body> 
 

 
</html>

來源

2016-11-22 14:48:09 Syden

謝謝！這也有效！我現在有兩條工作建議： 1. #nav> ul> li {float}：left; 位置：相對; 2.將特定寬度添加到#nav ul ul 對另一個有什麼特別的好處嗎？ – Bambi

坦率地說，他們都是1行代碼修改，所以它真的取決於你:) – Syden

Got;）謝謝，Syden！ – Bambi

你已申請r ules CSS爲ul父項的所有子項，因此所有子項都將被繼承父項CSS的規則ul ul。

嘗試使用選擇參考 '>'，當你只想定位父元素

對於本例你只需要改變

#nav ul li { 
    float: left; 
}

通過

#nav > ul >li { 
float: left; 
}

來源

2016-11-22 15:14:05 Sourceforest

CSS - 懸停UL項目不在垂直線

回答

相關問題