css - 如何用CSS绘制真正的透明边框？

Question

注意:好像有一个same problem以前但我希望以更好的方式提出问题，得到标记为已解决的答案。

简而言之，透明元素边框并不是真正透明的，因为它们采用元素背景的颜色而不是不可见，即使它被绘制为“外部边框”。如何使用 CSS 绘制真正的透明边框？

我为什么要这个？

因为我有一个CSS menu with drop down on hover .在主菜单和子菜单之间，有一个间隔的要求。间隙导致悬停失去焦点，从而关闭菜单。可能还有其他方法可以做到这一点，但如果可能的话，透明边框会很整洁。

HTML

<ul id="root">
    <li>Item 1
        <ul><li>Subitem 1</li></ul>
    </li>
    <li>Item 2
        <ul><li>Subitem 2</li></ul>
    </li>
</ul>

CSS

ul, li {
    list-style: none;
    margin: 0; padding: 0;
    color: #fff;
}
ul ul { background-color: red; }
ul#root > li {
    background-color: blue;
    display: inline-block;
    position: relative
}
ul#root > li > ul {
    position: absolute;
    display: none;
    /* margin-top: 10px; want to have gap but the hover will lose focus*/
    border-top: 10px solid green; /* if only this is transparent */
}
ul#root > li:hover > ul {
    position: absolute;
    display: block;
}

Answer 1

使用 li 的背景颜色而不是 ul 并使用 padding top

ul#root > li > ul { padding-top:10px; background: transparent; }
ul#root > li > ul > li { background: #f00; }

或使用

ul#root > li > ul { border-top :10px solid rgba(0,0,0,0); }

或

ul#root > li > ul { border-top :10px solid transparent; }