求助：实现下拉菜单垂直滑出效果的响应式导航栏开发

我明白你想要让下拉菜单在 hover 时平滑垂直滑出，而不是直接生硬显示出来。当前代码通过切换 display 属性控制下拉菜单的显示/隐藏，这种方式没法添加过渡动画。我们可以改用 max-height 结合 CSS 过渡来实现你想要的滑出效果，同时保留原有的响应式布局特性。

修改后的完整 CSS 代码 #

.navbar { 
    background-color: #31577C; 
    overflow: hidden; 
    width: 100%; 
}
ul { 
    font-family: Arial; 
    text-shadow: 0px 0px 20px black; 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
}
li { 
    float: left; 
    position: relative; /* 新增：让下拉菜单相对于父li定位，避免布局偏移 */
}
li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: background-color 0.5s ease; /* 把过渡统一写在这里，确保hover动画生效 */
}
li a:hover, .dropdown:hover .dropbtn { 
    background-color: #97C026; 
}
.dropbtn { 
    background-color: #31577C; 
}
li.dropdown { 
    display: inline-block; 
}
.dropdown-content { 
    position: absolute; 
    background-color: #31577C; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    z-index: 1;
    max-height: 0; /* 初始状态高度为0，隐藏内容 */
    overflow: hidden; /* 截断超出max-height的部分 */
    transition: max-height 0.3s ease-out; /* 添加滑出过渡动画，时长可按需调整 */
}
.dropdown-content a { 
    color: white; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    transition: background-color 0.5s ease;
}
.dropdown-content a:hover { 
    background-color: #97C026; 
}
.dropdown:hover .dropdown-content { 
    max-height: 200px; /* hover时设置足够大的高度，确保所有菜单项都能显示 */
}
.active { 
    background-color: #97C026; 
}
@media only screen and (max-width: 768px) {
    ul { 
        position: static; 
        text-align: center; 
    }
    li { 
        margin-bottom: 1px; 
        float: none; /* 移动端取消浮动，让菜单项垂直排列 */
        position: relative;
    }
    ul li, li a { 
        width: 100%; 
    }
    .dropdown-content { 
        position: static; /* 移动端下拉菜单改为静态定位，和父项同宽 */
        min-width: 100%;
    }
    .dropdown-content a { 
        text-align: center; 
    }
}

HTML 代码无需修改，保持你原有的即可： #

<div class="navbar">
    <ul align="center">
        <li><a href="Naslovna.html">Naslovna</a></li>
        <li class="dropdown"><a href="Uređaji.html" class="dropbtn">Uređaji</a>
            <div class="dropdown-content">
                <a href="Pixel.html">Google Pixel 2 </a>
                <a href="V30.html">LG V30</a>
            </div>
        </li>
        <li><a href="Softver.html">Softver</a></li>
        <li class="active"><a href="Registracija.html">Registracija </a>
        </li>
    </ul>
</div>

关键修改说明： #

• 替换显示逻辑：把 dropdown-content 的 display: none 改成 max-height: 0 + overflow: hidden，因为 display 属性无法添加过渡动画，而 max-height 可以。
• 添加滑出动画：给 dropdown-content 加上 transition: max-height 0.3s ease-out，hover 时设置足够大的 max-height（比如200px，只要能覆盖下拉菜单的实际高度就行），实现平滑滑出效果。
• 优化定位：给父元素 li 添加 position: relative，确保下拉菜单相对于父菜单项定位，不会出现偏移问题。
• 移动端适配：在媒体查询中把 dropdown-content 改为 position: static，让下拉菜单在移动端和父项同宽，保持垂直排列的响应式体验。
• 统一过渡效果：把背景色的过渡统一写到基础样式里，确保所有 hover 状态都有平滑的颜色变化动画。

这样修改后，“Google Pixel 2”和“LG V30”就会像你期望的那样，在 hover 时从下拉容器下方垂直滑出显示了。

内容的提问来源于stack exchange，提问作者Pavle Vukajlovic