javascript - 如何在我的 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;)以将其放置在一个间隙中

---

fiddle - http://jsfiddle.net/5sy2kmt8/

---

有了边距和上面的修复，它看起来像这样(图片)