CSS 下拉列表：整个 ul 改变了它的高度

Question

晚上好，

我创建了一个这样的下拉菜单：

<nav class="navigation">
    <ul>
        <li id="welc"><a href='#'>Willkommen</a></li>
        <li id ="proj"><a href='#'>Projekte</a>
            <ul>
                <li><a href='#'>Natur</a></li>
                <li><a href='#'>Objekte</a></li>
            </ul>
        </li>
        <li><a href='#'>Bilderrechte</a></li>
        <li><a href='#'>Impressum</a></li>
    </ul>
</nav>

我的问题如下：

当我悬停在 "Projekte" 上时，整个 < nav > 改变了它的高度。我该如何解决这个问题？

Answer 1

在你的css

.navigation
{
    height:43px;max-height:43px; // ADD THIS 
    overflow: hidden; // REMOVE THIS
}

Answer 2

这应该有效：Fiddle

body {
text-align: center;
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 16px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.navigation{
display: inline-block;
text-align: center;
margin-left: -500px;
margin-top: 20px;
position: fixed;
background: #409ED5;
border-radius: 15px 50px
}

.navigation ul{
margin-top: 4px;
}

.navigation ul ul{
 position: absolute;
 /*width:200px;*/ //optional         
}

.navigation ul li{
width: 120px;
border-left: 5px, solid #666;
float: left;
cursor: pointer;
padding: 10px 15px;
-webkit-transition: all 0.3s ease-in;
border-radius: 15px 50px;
list-style-type: none;    
}

.navigation ul li:hover{
background: #00A2FF;
border-left: 5px solid #18E9FF;
}

.navigation ul li:hover a{
font-weight: bold;
color: #fff;
}

#proj:hover ul{
display: block;
}

#proj ul{
display: none;
}

.navigation ul li a{
font-family: georgia;
font-weight: normal;
font-style: italic;
font-size: 20px;
margin-bottom: 5px;
margin-top: 5px;
line-height: 16px;
text-decoration:none;
}

CSS 下拉列表：整个 ul 改变了它的高度

CSS dropdown: whole ul changes its height

html

css

dropdown