使用纯CSS向上向上打开的下拉菜单

使用纯CSS向上/向上打开的下拉菜单

添加

bottom:100%

到您的

#menu:hover ul li:hover ul

规则

#menu:hover ul li:hover ul {    position: absolute;    margin-top: 1px;    font: 10px;    bottom: 100%; }

---

还是要防止子菜单具有相同的效果，只需添加此规则

演示2

#menu>ul>li:hover>ul {     bottom:100%;}

---

为了获得边框，您可以添加以下属性

#menu>ul>li:hover>ul {     bottom:100%;    border-bottom: 1px solid transparent}