Question

我有一个简单的基本CSS下拉菜单，我想在所选项目下居中箭头图形。理想情况下，完全使用CSS。我想过用：after 选择器做这个，但我已经用它在菜单选项之间绘制分界线了：

HTML：

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='selected'>Option Two
        <ul class='sub-menu'>
            <li>Sub One</li>
        </ul>
    </li>
    <li>Option Three Is Not the Best</li>
</ul>
<div class='arrowholder'>
    <div class='arrow'></div>
</div>

CSS：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

ul {
    list - style: none;
    width: 100 % ;
    background: red;
    height: 50px;
    padding: 10px 10px 0 10px;
    margin: 0px;
}
li {
    float: left;
    margin - top: 10px;
}
li: after {
    content: "|";
    margin: 0 8px;
}.sub - menu {
    display: none;
}

.arrowholder {
    clear: both;
    width: 100 % ;
    background: green;
    height: 50px;
}
.arrow {
    width: 50px;
    height: 50px;
    background: url(http: //upload.wikimedia.org/wikipedia/en/1/1c/Up_Arrow_Icon.png) no-repeat;border:solid 1px white;
}

JSFiddle：http://jsfiddle.net/pnoeric/MrW58/2/

我已经整理出一个基于jQuery的解决方案（你会在小提琴上看到它）但是出于某种原因，它不适用于我的跨浏览器...... position（）方法返回不同的值Chrome与Firefox相比，所以它不可靠。

更新： grrr，我的基于jQuery的解决方案在Chrome JavaScript控制台未打开时运行良好。当它打开时，jQuery position（）方法会混淆并返回奇怪的值。 Sooo ...我有一个解决方案，基于jQuery的解决方案做到了，我只需要关闭开发者控制台。

理想情况下，我正在寻找一个100％CSS的解决方案，除此之外，还有一点点支持jQuery。我怎么能做到这一点？

Answer 1

你可以在拥有该箭头的.selected li上使用伪类。例如：

.selected:after {
    content:'';
    position:absolute;
    width:50px;
    height:50px;
    background:url(http://upload.wikimedia.org/wikipedia/en/1/1c/Up_Arrow_Icon.png) no-repeat; 
    top:30px;
    left:50%;
    margin-left:-25px;
    border:solid 1px white;
}

请确保列出您的列表项目位置：relative。

以下是演示：http://jsfiddle.net/9u2J6/4/

Answer 2

为什么不简单地将背景图像应用于每个li，使用background-position：bottom center;定位箭头，背景重复：不重复;然后使用padding-bottom使内容不与箭头重叠。

Answer 3

事实证明，只要Chrome的JavaScript控制台面板未打开，我的基于jQuery的解决方案就能完美运行。当它打开时，position（）方法会混淆并停止运行。超级沮丧地发现（浪费了这么多时间）但很高兴我找到了它。

这是解决方案......只需手动将箭头图形移动到需要居中的位置。

$(function() {
    p = $('.current').position();
    w = $('.current').width();
    naw = $('.arrow').width();
    f = Math.floor(p.left + (w/2) - (naw/2))-20;
    $('.arrow').css('margin-left', f+'px');
});

如何将图形置于基于<ul>的导航菜单下？</ul>

3 个答案: