创建一个带有CSS的下拉菜单。

The dropdown menu (sub) does not appear right below the element it is supposed to when I hover on the navbar. How can I get it to appear below it instead of to the right of it? Also, how can I get the extra spacing on the left side of each menu to disappear? I tried setting the padding to 0, but that did not change anything.

下拉菜单(sub)不会出现在我在导航条上停留的元素下面。我怎么才能让它出现在它下面而不是右边呢?另外，我怎样才能让每个菜单左边的额外间距消失呢?我尝试将填充设置为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>

1 个解决方案

#1

You were almost there! You just added the :hover to the wrong div.

你几乎是那里!您刚刚添加了:hover到错误的div。

Make the following changes: display:none to ul.sub and .navbar li:hover ul.sub instead of .navbar:hover ul.sub

做出以下更改:显示:none to ul。然后是。navbar li:hover ul。代替。navbar:hover ul.sub。

UPDATE: to centre the ul.sub, use display: block. To remove padding, assign value of 0, instead of 'none'. See example below:

更新:中心的ul。子,使用显示:块。要删除填充，指定值为0，而不是“none”。请参见下面的例子:

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>