只有一半的悬停菜单出现

Question

在我正在开发的网站中，当我将一个菜单悬停在导航菜单项上时，我会显示一个菜单。但是，只有一半的悬停菜单出现。

HTML：

<div class= "navn">
    <ul>
        <li>
            <a class="btn" href="about_contact.html">
                About Us              
                <div class="tooltip">
                    Contact Info, and <b>stuff</b> <!--the txt inside the hover thing-->
                </div>
            </a>
        </li> 
    </ul>
</div>

CSS：

.btn {
    /* irrelevant: some styling to make the anchor tags look nicer */
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    margin: auto;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Arial', 'sans-serif';
}
.btn:hover .tooltip {
    display: block;
}
.tooltip {
    background-color: white;
    color: black;
    position: absolute;
    display: none;
    border: 1px solid black;
}

我看到的：

为什么会这样？我该怎么做才能阻止这个？

抱歉没有JSFiddle

修改：我知道我可以在<a>标记上使用标准工具提示，但我希望在工具提示中使用格式化文本。

Answer 1

也许你的<div class="navn">身高不够。尝试扩展它，看看发生了什么。或者在工具提示上设置z-index。

设置ul{ height: 60px; //for example}。我认为它对你有帮助。