悬停时单 li 顶部边框没有列表的其余部分

Question

这里是实时链接 http://soloveich.com/pr1-1/

尝试在菜单中悬停时放置边框（以及中间的箭头）。 但是使用这段代码，它会在整个菜单上放置一个边框，并在其上放置一个单独的 li。

#menu ul li {
margin-top: -50px;
padding-top: 50px;
float: right;
margin-right: 30px;
display: inline-block;
}
#menu li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}

a:hover 可以解决问题，但我想不出将边框放在顶部的方法，而且我预计将箭头插入符号放在那里也会出现问题

谢谢

Answer 1

试试：

.menu-menu-1-container li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}

或者：

#menu li li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}