創建一個CSS不工作的下拉菜單

Question

當我將鼠標懸停在導航欄上時，下拉菜單（子）不會出現在它應該在元素下方。 我怎樣才能讓它出現在它下面而不是右邊？ 另外，如何讓每個菜單左側的額外間距消失？ 我嘗試將填充設置為0，但這並沒有改變任何東西。

 a { text-decoration: none; color: #000; } .navbar { background-color: #f2f2f2; position: fixed; top: 0; width: 100%; text-align: center; font-family: "Raleway"; font-size: 93%; border-width:1px 0; list-style:none; margin:0; padding:0; left: 0; } .navbar > li{ display:inline-block; } .navbar li { list-style-type: none; padding-left: none; } .navbar a { float: center; display:inline-block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: #ddd; } .navbar li:hover ul.sub { display: inline-block; } .dropdown { position: relative; display: inline-block; } ul.sub { padding-left: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } ul.sub a { color: #000000; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } 

  <ul class = "navbar"> <!--add dropdown menu links for everything except collaboration--> <li class = "dropdown"> <li><a href ="project.html">About FRES(H)</a> <ul class = "sub"> <li><a href = "safety.html">Safety</a></li> <li><a href = "sense.html">Sense</a></li> <li><a href = "express.html">Express</a></li> <li><a href = "fresh.html">Keep Fresh</a></li> <li><a href = "notebook.html">Notebook</a></li> <li><a href = "interlab.html">Interlab</a></li> <li><a href = "protocols.html">Protocols</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="modelling.html">Models</a> <ul class = "sub"> <li><a href = "etnr1.html">Protein Modelling Etnr1</a></li> <li><a href = "etnr2.html">Protein Modelling Etnr2</a></li> <li><a href = "internal.html">Internal Cellular Model</a></li> <li><a href = "diffusion.html">Macroscopic Diffusion Model</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="software.html">Technology</a> <ul class = "sub"> <li><a href = "primer.html">Primer Design App</a></li> <li><a href = "smartphone.html">SmartPhone App</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="humanpractices.html">Human-Centered Design</a> <ul class = "sub"> <li><a href = "human.html">Integrated Human Practices</a></li> <li><a href = "outreach.html">Outreach</a></li> <li><a href = "knowledgetheory.html">Theory of Knowledge</a></li> </ul> </li> </li> <li><a href ="http://2016.igem.org/Team:Sydney_Australia/Collaboration">Engagement</a></li> <li class = "dropdown"> <li><a href ="team.html">Meet the Team</a> <ul class = "sub"> <li><a href = "about.html">About Us</a></li> <li><a href = "attributions.html">Attributions</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="achievements.html">Awards</a> <ul class = "sub"> <li><a href = "parts.html">Parts</a></li> <li><a href = "medals.html">Medals</a></li> </ul> </li> </li> </ul> 

Answer 1

你快到了！ 你剛剛添加了：hover到錯誤的div。

進行以下更改： display:none to ul.sub and .navbar li:hover ul.sub而不是.navbar:hover ul.sub

更新：以ul.sub為中心，使用display: block 。 要刪除填充，請指定值0，而不是“無”。 見下面的例子：

 a { text-decoration: none; color: #000; } .navbar { background-color: #f2f2f2; position: fixed; top: 0; width: 100%; text-align: center; font-family: "Raleway"; font-size: 93%; border-width:1px 0; list-style:none; margin:0; padding:0; left: 0; } .navbar > li{ display:inline-block; } .navbar li { list-style-type: none; padding-left: none; } .navbar a { float: center; display:inline-block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: #ddd; } .navbar li:hover ul.sub { display: block; } .dropdown { position: relative; display: inline-block; } ul.sub { padding-left: 0; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; display:none; } ul.sub a { color: #000000; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } 

  <ul class = "navbar"> <!--add dropdown menu links for everything except collaboration--> <li class = "dropdown"> <li><a href ="project.html">About FRES(H)</a> <ul class = "sub"> <li><a href = "safety.html">Safety</a></li> <li><a href = "sense.html">Sense</a></li> <li><a href = "express.html">Express</a></li> <li><a href = "fresh.html">Keep Fresh</a></li> <li><a href = "notebook.html">Notebook</a></li> <li><a href = "interlab.html">Interlab</a></li> <li><a href = "protocols.html">Protocols</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="modelling.html">Models</a> <ul class = "sub"> <li><a href = "etnr1.html">Protein Modelling Etnr1</a></li> <li><a href = "etnr2.html">Protein Modelling Etnr2</a></li> <li><a href = "internal.html">Internal Cellular Model</a></li> <li><a href = "diffusion.html">Macroscopic Diffusion Model</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="software.html">Technology</a> <ul class = "sub"> <li><a href = "primer.html">Primer Design App</a></li> <li><a href = "smartphone.html">SmartPhone App</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="humanpractices.html">Human-Centered Design</a> <ul class = "sub"> <li><a href = "human.html">Integrated Human Practices</a></li> <li><a href = "outreach.html">Outreach</a></li> <li><a href = "knowledgetheory.html">Theory of Knowledge</a></li> </ul> </li> </li> <li><a href ="http://2016.igem.org/Team:Sydney_Australia/Collaboration">Engagement</a></li> <li class = "dropdown"> <li><a href ="team.html">Meet the Team</a> <ul class = "sub"> <li><a href = "about.html">About Us</a></li> <li><a href = "attributions.html">Attributions</a></li> </ul> </li> </li> <li class = "dropdown"> <li><a href ="achievements.html">Awards</a> <ul class = "sub"> <li><a href = "parts.html">Parts</a></li> <li><a href = "medals.html">Medals</a></li> </ul> </li> </li> </ul>