网站子导航布局异常求助：修复左对齐与衔接问题

问题 #

子导航未与父级<li>左对齐，且未与整个导航栏的边缘衔接，无法推进hover功能开发。

解决方案 #

针对你的代码，需要调整子菜单的定位方式、布局样式，并完善hover显示逻辑，具体修改如下：

• 给父级<li>添加position: relative，让子菜单以父元素为定位参考
• 子菜单<ul>设置绝对定位，通过left: 0实现与父li左对齐，top: 100%让它紧贴父元素底部
• 重置子菜单的内外边距，设置固定宽度避免内容折行，同时添加阴影保持和主导航一致的视觉效果
• 默认隐藏子菜单，仅在父li hover时显示
• 调整父li的padding方式，避免hover时高度偏移

修改后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

#nav-logo {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    text-align: center;
}

#nav-navigace {
    display: flex;
    background-color: #EBE76C;
    width: 100%;
    height: 5vh;
    justify-content: center;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.75);
}

#nav-navigace ul {
    list-style: none;
    display: flex;
}

/* 父级li添加相对定位，调整padding避免高度异常 */
#nav-navigace ul li {
    position: relative;
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

/* 子菜单样式：绝对定位+隐藏+布局调整 */
#nav-navigace ul li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #EBE76C;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.75);
    width: 220px;
}

#nav-navigace ul li ul li {
    display: block;
    width: 100%;
    padding: 12px 15px;
    height: auto;
}

#nav-navigace ul li a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* hover时显示子菜单，同时高亮父元素 */
#nav-navigace ul li:hover {
    background-color: #F0ED93;
}

#nav-navigace ul li:hover ul {
    display: block;
}

#nav-kontakt {
    display: block;
    text-align: left;
}

#nav-kontakt div {
    margin-top: 5vh;
}

.citat {
    text-align: left;
    padding-top: 25px;
}

.relative {
    position: relative;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

#test {
    height: 200vh;
}

关键修改说明 #

1. 父li定位：position: relative是子菜单绝对定位的基础，确保子菜单不会脱离父元素的布局范围
2. 子菜单定位：left: 0直接对齐父li左侧，top: 100%让子菜单刚好在父元素下方，不会重叠
3. hover显示：通过li:hover ul {display: block}实现鼠标悬停时显示子菜单，完成核心交互
4. 布局优化：调整父li的padding为左右方向，用align-items: center垂直居中文字，避免hover时高度变化；子菜单设置固定宽度，保证内容完整显示

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