下拉菜单干扰导航栏布局？求助修复导航项下移问题

你的问题出在下拉菜单没脱离文档流，展开时会占据页面空间，导致其他导航元素被挤下去。另外你的CSS存在语法错误（重复选择器、缺失大括号、无效属性），先修正这些，再调整定位方式就能解决：

修正后的完整代码 #

HTML（结构无需修改）

<div class="navigation">
        <ul>
            <li><a>&#9776;</a>
                <ul>
                    <li><a href="#">example1</a></li>
                    <li><a href="#">example2</a></li>
                </ul>
            </li>
            <li><a href="index.html">Home</a></li>
            <li><a href="contactpage.html">Contact us</a></li>  
        </ul>
    </div>

CSS（关键修改已标注）

.navigation ul{ 
    width: 100%;
    height: 25px;
    margin: 0;
    padding: 10px 120px;
    background: rgba(53, 57, 53,0.9); 
    /* 补全大括号，删除重复的同一选择器 */
}

.navigation ul li{
    display: inline-block; /* 改成inline-block，方便对齐和后续定位 */
    padding: 0px 10px 0px 0px;
    list-style-type: none;
    position: relative; /* 关键：给父li设置相对定位，作为子菜单的定位基准 */
}

.navigation ul li a {
    padding: 10px 0px;
    text-decoration: none;
    color: #E5E4E2;
}

.navigation ul li ul {
    display: none;
    width: 130px;
    background: rgba(53, 57, 53,0.9);
    position: absolute; /* 关键：绝对定位脱离文档流，不再挤压其他元素 */
    top: 100%; /* 让子菜单贴在父li底部 */
    left: 0;
    margin: 0; /* 清除ul默认边距 */
    padding: 0; /* 清除ul默认内边距 */
}

.navigation ul li:hover ul{
    display: block;
}

.navigation ul li ul li {
    display: block; /* 子菜单垂直排列，替换原float属性 */
    padding: 8px 10px; /* 给子项加内边距，提升点击体验 */
    width: 100%; /* 让子项占满菜单宽度 */
}

.navigation ul li ul li a{
    padding: 0; /* 修正无效的padding属性 */
}

.navigation ul li ul li a:hover {
    color: #AFE1AF;
}

.navigation ul li a:hover{
    color: #AFE1AF;
}

关键修改说明 #

1. 父li设置position: relative：为子菜单的绝对定位提供参考基准，确保下拉菜单不会偏离父项
2. 子ul设置position: absolute：让下拉菜单脱离正常文档流，展开时不再占用页面空间，也就不会挤压其他导航项
3. 修复CSS语法错误：删除重复选择器，补全所有缺失的大括号，修正无效的padding: ;属性
4. 优化子菜单布局：把子li的float: left改成display: block，让下拉菜单项垂直排列，同时添加内边距提升交互体验

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