Question

我试图通过在我的活动项目菜单上使用“纯”CSS来提升箭头。问题，我有一个奇怪的输出。我的FIDDLE。你知道怎么解决吗？

    #cssmenu li.active a {
   /* display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 10px solid black;
}

Answer 1

这里的问题是箭头将与它描述的li一样宽。做这样的事情的最好方法是使用css伪元素。您正在看的是：

#cssmenu li.active a:before {
    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

祝你好运！

更新小提琴：http://jsfiddle.net/XLfcY/

Answer 2

div{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

用于纯CSS箭头

Answer 3

你问的底部的箭头

position: relative;
top: 60px;

这里的小提琴链接 http://jsfiddle.net/suriyag/HwcTn/1/

CSS三角箭头菜单活动项目

3 个答案: