悬停边框

Question

我在屏幕底部有一个导航，悬停时会弹出一个子菜单。我在 fiddle 上完成了所有这些工作。问题出在边框上，弹出菜单的边框小了 1px，我希望它与父项的红色边框对齐。我该怎么做？

<div id="filter">
<ul>
<li class="small-2 columns">
    Color
    <ul>
        <li>
            Blue
        </li>
        <li>
            Green
        </li>
        <li>
            Yellow
        </li>
    </ul>
</li>
<li class="small-2 columns end">
    Letter
    <ul>
        <li>
            A
        </li>
        <li>
            B
        </li>
    </ul>
</li>

Answer 1

您可以使用 calc 作为弹出菜单的宽度，使其更宽 2 像素。然后，将它向左移动-1px。见 fiddle : http://jsfiddle.net/uqk1h1c1/

和代码：

#filter >ul >li >ul{
    position: absolute;
    top: 40px;
    left: -1px;
    width: calc(100% + 2px);
    margin: 0;
    border: 1px solid blue;
}

Answer 2

您可以在 <ul>（子菜单）上指定 left 和 right 属性。您必须删除 width: 100%;

像这样：

#filter >ul >li >ul{
    position: absolute;
    top: 40px;
    left: -1px;
    right: -1px;
    margin: 0;
    border: 1px solid blue;
}

悬停边框

Border on hover

css

sass