html - 悬停菜单只出现一半

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} .我认为它对您有帮助。