html - 在 html 和 css 中创建菜单

Question

我想创建这样的菜单:

我想在事件页面上和悬停后看到红色方 block 。菜单创建者:

<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 标记中将其设置为静态。不幸的是我不知道更好的方法。另外一个“清晰”的标签会很好，因为 float :)

但也许它有一点帮助 ;-)