css 让边框变透明,如何用CSS绘制真正的透明边框？

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

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

为什么我要这个？

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

HTML

• Item 1
  • Subitem 1
• Item 2
  • Subitem 2

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;

}