[英]How to make a vertical CSS menu with arrows on the right of each entry?
I've been trying to get this working for a really long time and am totally stumped. 我一直在努力使它工作很长时间,并且完全陷入困境。 There are tons of articles on the net on how to make a basic CSS list menu, but I'm wanting to make one that looks like this: 网上有大量关于如何制作基本CSS列表菜单的文章,但我想制作一个看起来像这样的文章:
Line 1 >>
Line 2 >>
Line 3 >>
Where all of each line is a link (the text, whitespace, and arrows). 每行都是链接(文本,空格和箭头)。
I've tried everything I can think of and nothing has worked. 我已经尝试了所有可以想到的方法,但没有任何效果。 I'm sure this is pretty simple to do if you know what you're doing, so can anyone help me out? 如果您知道自己在做什么,我敢肯定这很简单,那么有人可以帮我吗?
Here is what I currently have: 这是我目前拥有的:
<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>
Quickest way is with a background image (set on the li
or a
, depending your design needs): 最快的方法是使用背景图片(根据设计需要在li
或a
上设置):
background:transparent url("http://placehold.it/25x25") right center no-repeat;
http://jsfiddle.net/daCrosby/8aTvn/1/ http://jsfiddle.net/daCrosby/8aTvn/1/
You can use css :after
properties to achieve this. 您可以使用css :after
属性来实现此目的。
DEMO http://jsfiddle.net/yeyene/dnPN4/ 演示http://jsfiddle.net/yeyene/dnPN4/
ul.menu > li a:after {
content:" »";
}
IE 9+ and all major browsers will support :after
, however it is not supported in IE 7 or lower and IE 8 only supports it with a DOCTYPE declared. IE 9+和所有主流浏览器都将支持:after
,但是IE 7或更低版本不支持IE,而IE 8仅通过声明的DOCTYPE支持它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.