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

你几乎没有！你刚刚添加：悬停到错误的div。

做以下修改： display:none到ul.sub和.navbar:hover ul.sub.navbar li:hover ul.sub代替

UPDATE：居中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>