Question

将鼠标悬停在导航栏上时，该按钮应更改颜色。

但是，在我的情况下，按钮会改变颜色，但它不会一直到导航栏的底部（你仍然可以在黑色下看到一些灰色）。

如何制作它以便一直到底？

此外，出于某种原因，它会在谷歌浏览器中一路向下，但在其他浏览器中则不会。

的index.html

<div id ="nav">
<ul id = "navbar" class = "navigationbar">
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown1</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown3</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class = "dropdown">
    <a href="#" class="dropbtn">Not Dropdown</a>
    </li>
</ul>
</div>

和style.css

html { width:100%; height:100%; margin:0 padding:0;}
body { width:100%; height:100%; margin:0; padding:0; }

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:lightslategray;
min-width: 100%;
list-style: none;
display: inline-block;
height: 100%;
}

#nav li {
height:100%;
vertical-align: middle;
line-height: 300%;
list-style: none;
display: inline-block;
}

#nav{
width: 100%;
display:table;
margin:0 auto;
text-align: center;
background-color: lightslategray;
}

.dropdown a{
height: 65%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}

.dropbtn{
height: 100%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;

}

.dropdown a:hover, .dropdown:hover .dropbtn {
background-color:black;
color: white;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
z-index: 20;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1; color: black;}

.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

我可以在Edge和Firefox上复制错误。对ul.navbar进行以下更改之一。（仅在firefox中测试过）。

display: inline-block至display: block
添加vertical-align: top或bottom
删除overflow: hidden

1和2来自这里：Remove Extra Space at Bottom of HTML List Item，我不确定为什么3个有效。

DIV中的UL不会更新高度

1 个答案: