jquery - 如何在基于 <ul> 的导航菜单下将图形居中？

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 的解决方案(你会在 fiddle 上看到它)但是出于某种原因，它对我来说不能跨浏览器工作...... position() 方法返回不同的值Chrome 与 Firefox，因此它不可靠。

更新:哎呀，当 Chrome JavaScript 控制台未打开时，我基于 jQuery 的解决方案可以完美运行。当它打开时，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;
}

请确保给您的列表项position:relative。

这是一个演示:http://jsfiddle.net/9u2J6/4/