[英]How to make a vertical CSS menu with arrows on the right of each entry?
我一直在努力使它工作很长时间,并且完全陷入困境。 网上有大量关于如何制作基本CSS列表菜单的文章,但我想制作一个看起来像这样的文章:
Line 1 >>
Line 2 >>
Line 3 >>
每行都是链接(文本,空格和箭头)。
我已经尝试了所有可以想到的方法,但没有任何效果。 如果您知道自己在做什么,我敢肯定这很简单,那么有人可以帮我吗?
这是我目前拥有的:
<style type="text/css">
ul.menu {
padding: 0;
margin: 0;
font-size: 16px;
}
ul.menu > li {
display: block;
width: 100%;
}
ul.menu > li:hover {
color: red;
}
ul.menu > li a {
display: block;
width: 100%;
}
ul.menu > li > a:hover {
background-color: #F7F7F7;
}
</style>
<ul class="menu">
<li>
<a href="">Line 1</a>
</li>
<li>
<a href="">Line 2</a>
</li>
<li>
<a href="">Line 3</a>
</li>
<li>
<a href="">Line 4</a>
</li>
</ul>
最快的方法是使用背景图片(根据设计需要在li
或a
上设置):
background:transparent url("http://placehold.it/25x25") right center no-repeat;
您可以使用css :after
属性来实现此目的。
演示http://jsfiddle.net/yeyene/dnPN4/
ul.menu > li a:after {
content:" »";
}
IE 9+和所有主流浏览器都将支持:after
,但是IE 7或更低版本不支持IE,而IE 8仅通过声明的DOCTYPE支持它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.