导航栏下拉菜单仅显示2项而非3项，请求排查原因

咱们直接从代码里找问题根源，这两个现象其实都是CSS设置不当导致的：

问题1：下拉菜单仅显示2行而非3行 #

你的下拉菜单第三项被遮挡主要有两个原因：

• 父容器固定高度拖后腿：.nav ul设置了height: 121px的固定高度，虽然子菜单是绝对定位脱离文档流，但这个固定高度会让导航栏无法扩展，页面其他元素很容易上移遮挡下拉菜单的第三项，完全不符合导航栏的自适应需求。
• z-index层级搞反了：.nav li li的z-index仅为999，而它的父元素.nav ul和.nav li的z-index都是99999，这会导致子菜单的层级比父容器还低，直接被导航栏的其他部分或者页面内容压在下面，自然看不到第三项。

问题2：子菜单标题（带下拉的父菜单项）仅显示2个 #

你给所有.nav li默认设置了display: none，这等于让所有菜单项都隐身了。你现在能看到2个带下拉的菜单项，大概率是浏览器默认样式或者你没贴出来的其他代码偶然让它们显示了，但Home、About、Contact这些父菜单项都被藏起来了。

修复方案 #

直接替换你的CSS代码为下面的版本，两个问题都能解决：

body { margin: 0; padding: 0; }
.nav ul { 
    list-style: none; 
    background-color: #36527c; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    /* 删掉固定高度，让导航栏自适应内容 */
    /* height: 121px; */
    position: relative; 
    z-index: 99999; 
}
.nav li { 
    font-family: Open sans hebrew; 
    font-size: 1.2em; 
    line-height: 40px; 
    margin-top: 35px; 
    position: relative; 
    z-index: 99999; 
    /* 把默认隐藏改成行内块显示，让所有父菜单项都出来 */
    display: inline-block;
    /* 给菜单项加左右间距，避免挤成一团 */
    margin-left: 10px;
    margin-right: 10px;
}
.nav a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding: 0 15px; /* 调整内边距，让点击区域更合理 */
    border-bottom: 1px solid #888; 
    transition: .3s background-color; 
    position: relative; 
    z-index: 99999; 
}
.nav a:hover { 
    background-color: #aaa; 
    color: #444; 
    cursor: pointer; /* 把cursor改成pointer，符合交互直觉 */
    position: relative; 
    z-index: 99999; 
}
.nav a.active { 
    position: relative; 
    z-index: 99999; 
}
/* Sub Menus */
.nav li ul {
    /* 给子菜单加基础样式，默认隐藏 */
    display: none;
    position: absolute;
    top: 100%; /* 让子菜单刚好贴在父菜单项底部 */
    left: 0;
    background-color: #36527c;
    padding: 0;
    margin: 0;
    width: 100%; /* 子菜单宽度和父菜单项保持一致 */
}
.nav li:hover ul {
    /* 鼠标悬停时显示子菜单 */
    display: block;
}
.nav li li { 
    position: relative; 
    z-index: 100000; /* 提高子菜单层级，确保不会被遮挡 */
    font-size: .8em; 
    margin-top: 0; /* 去掉父菜单项的margin-top，避免子菜单间距过大 */
    display: block; /* 子菜单项块级显示，占满整个宽度 */
    line-height: 35px; /* 调整子菜单行高，让布局更紧凑 */
}

关键修改说明 #

1. 移除了.nav ul的固定高度，让导航栏能自由自适应内容，彻底避免下拉菜单被遮挡。
2. 把.nav li的display: none改成display: inline-block，所有父菜单项都会正常显示，同时加了左右间距优化视觉体验。
3. 给子菜单的ul补充了完整的定位和显示逻辑，默认隐藏、悬停显示，位置也调整得更合理。
4. 提高了子菜单的z-index，确保它的层级比父容器高，不会被其他元素压住。
5. 微调了内边距、行高这些细节，让导航栏的交互和视觉效果更顺手。

改完之后，所有父菜单项都会显示，下拉菜单的3个选项也能完整展示了。

内容的提问来源于stack exchange，提问作者Dan Shimon Medina