CSS实现右拉菜单栏时top:0属性不生效问题求解

问题原因 #

你设置的top: 0不生效的核心原因是，只有脱离普通文档流的定位元素，top/left这类偏移属性才会生效。你当前的子菜单还是处于普通文档流中，同时没有给父元素设置相对定位作为偏移锚点，所以子菜单会跟在父级a标签的下方再向右偏移，无法对齐顶部。

调整方案 #

你只需要修改CSS部分的定位逻辑即可，不用改动HTML结构：

1. 给父级li添加position: relative，作为子菜单绝对定位的参考锚点
2. 直接控制子级整个ul的显示隐藏和定位，不要给子级ul下的单独li加偏移和显隐控制

修改后的完整CSS代码如下：

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li{
    position: relative; /* 新增：作为子菜单的定位参考 */
    float: none;
    width: 200px;
    height: 40px;
    background-color: darkgrey;
    opacity: 0.8;
    line-height: 40px;
    text-align: center;
}

ul li a{
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover{
    background-color: rgb(97, 98, 99);
}

/* 修改：直接控制子ul的默认状态 */
ul li ul{
    display: none;
    position: absolute; /* 新增：绝对定位脱离文档流 */
    top: 0; /* 对齐父li顶部 */
    left: 100%; /* 直接贴在父li的右侧，不需要给每个子li加margin */
}

/* 修改：hover父li时显示整个子ul */
ul li:hover ul{
    display: block;
}

调整后子菜单就会在hover时直接出现在父元素的右侧，且顶部完全对齐。

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