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

【问题标题】：How can I properly position the arrows in my jQuery navigation menu?如何在我的 jQuery 导航菜单中正确定位箭头？
【发布时间】：2015-08-15 18:02:53
【问题描述】：

我正在使用 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');
        });
    });
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

如果需要，您可以添加额外的边距（例如margin-left: 10px;）以将其定位为有间隙

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

加上边距和上面的修复，它看起来像这样（图片）

【讨论】：

【解决方案2】：

您需要定位箭头图标。

设置外部相对于内部绝对容器将实现它。

变化：

将position: relative; 添加到nav ul li a。

将position: absolute; top: 24px; right: 0; 添加到.arrow-down。

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

已更新jsfiddle上的css代码

【讨论】：