在html和css中创建菜单

Question

我想创建这样的菜单：

我想在acitve页面和悬停后看到红色方块。菜单由以下人员创建：

<div id="menu">
    <ul>
    <li><a href="#"><span>Home</span><a></li>
    <li><a href="#"><span>About</span><a></li>
    <li><a href="#"><span>Contact</span><a></li>
    </ul>
</div>

我试图创造这个2小时而没有任何东西:(你能给我一个建议吗？

Answer 1

这是一个适合你的jsfiddle：

http://jsfiddle.net/6sCZh/

li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px;   }

ul {  }

li a { display: block;   color: #fff; text-decoration: none; margin: 14px;   }

li a.active, li a:hover {  background-color: brown;  padding: 11px; margin: 3px; }

我添加了一个css类“active”，它应该用你的php代码设置为服务器端，或者在html标记中设置为static。不幸的是，我不知道更好的方法。另外一个“清晰”标签因为漂浮而很好：）

但也许它有点帮助; - ）

Answer 2

这样做的简单方法是在选择时为您的锚标签（或者更好的是，他们的父li元素）提供一个类。

然后创建一个针对li.selected和li：hover的规则，将红色框放置。

如果没有看到您的HTML AND CSS，我就无法更具体。

Answer 3

对于渐变，您需要CSS3或图像。我使用梯度生成器进行演示 - http://www.colorzilla.com/gradient-editor/

这个想法是主动链接高于菜单和负顶部和底部边距，以补偿高度差异。并且不要将overflow: hidden放在菜单上：）

http://jsfiddle.net/23zZE/