html - 在 html 和 css 中创建菜单

Question

我想创建这样的菜单：

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

<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 类“活动”，它应该使用您的 php 代码设置在服务器端，或者通过在 html 标记中将其设置为静态。不幸的是，我不知道更好的方法。由于浮动，“清晰”标签也会很好:)

但也许它有点帮助;-)

Answer 2

一个简单的方法是在你的锚标签（或者，更好的是，它们的父 li 元素）被选中时给它们一个类。

然后创建一个以 li.selected 和 li:hover 为目标的规则，其中放置红色框。

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

Answer 3

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

这个想法是活动链接高于菜单，并且具有负的顶部和底部边距，以补偿高度差。并且不要放入overflow: hidden菜单:)

http://jsfiddle.net/23zZE/