html - 在悬停时在导航链接后面显示圆 Angular 矩形的最干净和最简单的方法？

Question

了解我想要什么的最佳方式是观看这个短短的 6 秒视频。请忽略视频中的字体变化。 http://www.youtube.com/watch?v=7KM78DKoVZU

让圆 Angular 矩形在悬停时显示在导航链接后面的最佳方法是什么？在悬停时，我可以将导航按钮的背景更改为图像中带有圆 Angular 矩形的背景图像，但在我开始之前，我想确保没有更清晰或更简单的方法来实现这一点。

想法？谢谢!

Answer 1

矩形并没有真正显示在导航链接后面。真正发生的是导航链接的样式在悬停状态期间发生变化。

#menu { 
    list-style: none;
    display: inline-block;
    background: #eee;
    margin: 0;
    padding: 0;
}

#menu li {
    float: left;
    padding: 10px 5px;
    margin: 4px;
    color: #222;
    cursor: pointer;
 }
#menu li:hover { 
    background: #ccc;
    border-radius:6px;
}

查看 jsFiddle 以获取实际示例。

http://jsfiddle.net/kGa67/

编辑——我想最干净的方法是将 ul 和 li 都设置为内联 block ，而不是像我那样 float li。如果您有响应式设计，请使用 ems，但请注意，它并不总是能在非常小和非常大的宽度上完美缩放。