0

我有一个简单的基本 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，当 Chrome JavaScript 控制台未打开时，我的基于 jQuery 的解决方案可以完美运行。当它打开时，jQuery position() 方法会变得混乱并返回奇怪的值。太好了...我有一个解决方案，基于 jQuery 的解决方案可以做到，我只需要关闭开发者控制台。

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

4

3 回答 3

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;
}

只要确保给您的列表项位置：相对。

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

于 2013-08-28T03:05:31.197 回答
0

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

于 2013-08-28T02:14:14.537 回答
0

事实证明，我的基于 jQuery 的解决方案可以完美运行……只要 Chrome 的 JavaScript 控制台面板未打开。当它打开时， 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');
});
于 2013-08-28T03:52:12.067 回答