如何在jQuery导航菜单中正确定位箭头？

Question

我正在使用CSS和jQuery制作带有垂直下拉菜单的水平导航菜单。 我想向所有具有子菜单的顶级链接添加一个箭头，以指示它们具有子菜单。 我现在的问题是箭头位于链接文本下方。 我希望箭头位于链接文本的右侧。 这是一个jsFiddle来演示该问题。

我的CSS：

nav {
    background: url(../img/navigationBackground.gif) repeat-x #e2e3df;
    height: 55px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #2d3132;
}
nav ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
nav > ul > li {
    float: left;
    display: inline;
    box-shadow:         4px 0px 6px 0px rgba(0, 0, 0, 0.5);
    border-left: 1px solid #484947;
    border-right: 1px solid #e5e6e3;
    height: 55px;
}
nav ul li a {
    font-size: 14pt;
    color: #2d3132;
    text-decoration: none;
    line-height: 55px;
    padding-left: 25px;
    padding-right: 25px;
    height: 55px;
    display: block;
}
nav ul li a:hover {
    background: #2E3233;
    color: #E2E3DF;
}
nav > ul > li > ul {
    display: none;
    list-style: none;
    position: absolute;
    z-index: 1;
    border: 1px solid #2E3233;
    box-shadow:         4px 4px 15px 0px rgba(0, 0, 0, 0.75);
}
nav > ul > li > ul > li > a {
    padding: 3px 10px;
    background: #fffefc;
    border-bottom: 1px solid #2E3233;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2e3233;
}

我的HTML：

<nav>
    <ul>
        <li><a href="">Home</a>
        </li>
        <li><a href="">Blog</a>

            <ul>
                <li><a href="">Personal</a>
                </li>
                <li><a href="">Tips &amp; Tricks</a>
                </li>
            </ul>
        </li>
        <li><a href="">Portfolio</a>

            <ul>
                <li><a href="">Web Designs</a>
                </li>
                <li><a href="">Development Projects</a>
                </li>
                <li><a href="">Photo Gallery</a>
                </li>
            </ul>
        </li>
        <li><a href="">Services</a>
        </li>
        <li><a href="">About</a>
        </li>
        <li><a href="">Contact</a>
        </li>
    </ul>
</nav>

我的jQuery

$(function(){
    //Find all ul elements within items in the nav
    $('nav ul li:has(ul)').each(function(){
        //Prevent the links that have submenus from being clicked
        $(this).children('a').on('click', function(e){
            e.preventDefault();
        })
        .append('<div class="arrow-down"></div>');
        $(this).mouseover(function(){
            console.log('hovered');
            $(this).find('ul').css('display', 'inline');
        })
        .mouseout(function(){
            $(this).find('ul').css('display', 'none');
        });
    });
});

Answer 1

只需添加display: inline-block到您的.arrow-down类

.arrow-down {
    display: inline-block;
    ...
}

如果需要，可以添加额外的边距（例如margin-left: 10px; ）以margin-left: 10px;出一定的间距

---

小提琴-http: //jsfiddle.net/5sy2kmt8/

---

有了边距和上述修复后，它看起来像这样（图片）

Answer 2

您需要放置箭头图标。

相对于内部绝对容器设置外部将实现此目的。

变化：

新增position: relative; 到nav ul li a 。

新增position: absolute; top: 24px; right: 0; position: absolute; top: 24px; right: 0; .arrow-down 。

如果需要，调整top / right属性。

已更新jsfiddle上的CSS代码