Dropdown导航菜单不显示及菜单项间距问题求助

针对你遇到的两个问题（下拉菜单项存在空白、鼠标悬停时下拉部分不显示），你的CSS代码存在语法错误和逻辑问题，以下是具体修复方案：

代码问题梳理及修正点 #

• #drop_nav 中的 overflow: hidden 会裁切掉下拉的子菜单，直接移除该属性。
• #drop_nav ul 里的 margins: 0px 是拼写错误，改为 margin: 0px。
• #drop_nav li 中 width: 100% 后缺少分号，导致后续 align-items: center 不生效，补上分号；该元素为块级元素，align-items 属于flex容器属性，此处可直接移除。
• #drop_nav a 里的 text-weight 是错误属性，改为 font-weight。
• .submenu 中的 flex-direction: vertical 是错误值，flex布局垂直方向应为 column；同时移除子菜单li的绝对定位，避免所有子项重叠，改用flex布局控制排列。
• .arrow 中 color: #a9a9a9 后缺少分号，补上分号。
• 清理重复的选择器逻辑，统一子菜单的hover触发规则。

修正后的完整CSS代码 #

#drop_nav {
    margin: 0px;
    padding: 0px;
}

#drop_nav ul {
    list-style-type: none;
    width: 100%;
    display: flex;
    margin: 0px;
    padding: 0px;
}

#drop_nav li {
    position: relative;
    width: 100%;
}

#drop_nav a {
    color: #ffffff;
    background-color: #000000;
    height: 64px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: width .4s, height .4s;
}

#drop_nav a:hover {
    width: 80px;
    height: 75px;
    background-color: #dc143c;
}

/* 子菜单基础样式 */
.submenu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px; /* 与主菜单高度对齐，避免重叠 */
    width: 100%;
    padding: 0;
    margin: 0;
}

.submenu li {
    list-style: none;
}

/* 主菜单项hover时显示子菜单 */
#drop_nav li:hover .submenu {
    display: flex;
}

.arrow {
    margin-left: 8px;
    color: #a9a9a9;
    font-size: 12px;
}

额外说明 #

• 子菜单使用绝对定位脱离文档流，避免影响主菜单布局；通过 top:64px 与主菜单底部对齐。
• 移除子菜单li的绝对定位后，flex布局会自动垂直排列子项，解决菜单项空白/重叠问题。
• 统一hover触发逻辑，主菜单项hover时直接显示整个子菜单容器，而非单独控制每个子项。

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