当我将鼠标悬停在导航栏上时，下拉菜单（子）不会出现在它应该出现的元素的正下方。我怎样才能让它出现在它下面而不是右边？另外，如何让每个菜单左侧的额外间距消失？我尝试将填充设置为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>
答案 0 :(得分：0)
你快到了！你刚刚添加了：hover到错误的div。
进行以下更改：
display:none至ul.sub和.navbar li:hover ul.sub而不是.navbar:hover ul.sub
更新：以ul.sub为中心，使用display: block。要删除填充，请指定值0，而不是“无”＃39;。见下面的例子：
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>