Question

我正在使用一些简单的菜单CSS，有些部分需要解开，让我的网站用户知道这个菜单有一些子菜单选项我想把箭头靠近它。

应该看起来像： http://funedit.com/imgedit/soubory/small_19971213581407508176.jpg

我的代码如下：

CSS

.filter{
    margin-left:20px;
    position: relative;
}

.filter a{
    color: #888888;
    float: left;
    width: 120px;
    height: 35px;
    text-decoration: none;
    padding: 0.2em 0.6em;
    font-size: 120%;
    text-align: center;
}

li:after {
    content: "";
    background-image: url("../images/filter_arrow.png");
    background-repeat: repeat-x;
    display: block;
    width: 25px;
    height: 13px;
    margin: 0;
    position: absolute;
    right: 480px;
    top: 100px;
    vertical-align: middle;
}

HTML ：

<div class="filter">
   <ul>
      <li><a href="#">Progress</a></li>
      <li><a href="#">Claimed number</a></li>
      <li><a href="#">Make</a></li>
      <li><a href="#">Status</a></li>
   </ul>
</div>

编辑：是的抱歉，我忘记了我在上面使用的一些CSS以及其他代码，其中：

ul{
    list-style-type: none;
    float: left;
    width: 100%;
    padding-left: 0px;
}

li{
    display: inline;
}

有谁可以帮助我用箭头解决这个问题吗？因为在我的版本上，他们目前只是在网站上随机分开。

Answer 1

http://css-tricks.com/snippets/css/css-triangle/

这应该可以帮助您，使用

插入三角形

<span class=".arrow-down"></span>

或:: after。

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}

Answer 2

你可以使用unicode arrow sign：）

▾▾

或

▼▼

菜单中的样式箭头

2 个答案: