悬停边框

Question

JSFiddle

我在屏幕底部有一个导航栏，在悬停时会弹出一个子菜单。我把这一切都放在了小提琴上。问题在于边框，弹出菜单边框比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 px。然后，将其向左移动-1px。请参阅小提琴：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>（子菜单）上指定左和右属性。您必须删除width: 100%;

像这样：

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