html - 使用 CSS 将下拉导航与主菜单对齐

Question

我有一个经常使用的纯 CSS 下拉导航技术。下面是简化的 HTML:

<ul id="nav">
    <li><a href="#">Menu Item</a>
        <span class="subnav">
            <a href="#">Submenu Item</a>
            <a href="#">Submenu Item</a>
            <a href="#">Submenu Item</a>
        </span>
    </li>
</ul>

这是简化的 CSS:

span.subnav{display:none;}
#nav1 li:hover span.subnav{display:block}
#nav1 li{position:relative;}
span.subnav{position:absolute;top:20px;left:0;}

问题在于垂直定位 sub.subnav，其中我有 top:20px。我需要将该元素精确定位在 LI 元素的底部。如果太高，它会与主菜单项重叠。如果太低，主菜单项和子导航之间就会有间隙，当鼠标经过该间隙时，子导航会意外关闭，用户会感到沮丧。

我通常可以精确到像素(在本例中为 20px)。但有些浏览器似乎渲染的字体不完全相同。 LI元素的高度是由它里面的字体决定的，所以可能会有一些差异，然后我的20px计算不正确。

CSS 中是否有其他方法可以将我的 span.subnav 元素定位到 LI 元素的底部？

谢谢。

Answer 1

我认为将 .subnav 的 top CSS 属性设置为 auto

#nav li { position: relative; }
#nav li:hover span.subnav { display: block; }
#nav li .subnav { top: auto; }

JSFiddle:https://jsfiddle.net/aam6je6m/