只有一半的悬停菜单出现 [英] Only half of hover menu appears

问题描述

在我正在开发的一个网站中，我制作了一个菜单，当您将鼠标悬停在导航菜单项上时，该菜单就会显示出来。但是，只有一半的悬停菜单出现。

HTML：

 < div class =navn> ; 
< ul> 
< li> 
< a class =btnhref =about_contact.html> 
关于我们
< div class =tooltip> 
联系信息和< b>内容< / b> <！ - 悬停物件内的txt  - > 
< / div> 
< / a> 
< / li> 
< / ul> 
< / div> 
  

CSS：

  .btn {
 / *无关：一些样式可以让锚点标签看起来更漂亮* / 
 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透明; 
 border-radius：4px; 
 text-decoration：none; 
 font-family：'Lucida Sans'，'Arial'，'sans-serif'; 
} 
 .btn：hover .tooltip {
 display：block; 
} 
 .tooltip {
 background-color：white; 
颜色：黑色; 
位置：绝对; 
 display：none; 
 border：1px纯黑色; 
} 
  

我看到：

为什么会发生这种情况？我能做些什么来阻止它？

对不起JSFiddle

编辑 ：我知道我可以在< a> 标签上使用标准工具提示，但我想在工具提示中使用格式化文本。

解决方案

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

设置 ul {height：60px; //例如} 。我认为它可以帮助你。

In a website I'm developing, I am making a menu that appears when one hovers over a navigation menu item. However, only half of the hover menu appears.

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;
}

What I see:

Why is this happening? What can I do to stop this?

Sorry for no JSFiddle

Edit: I know I can use a standard tooltip on the <a> tag, but I want to have formatted text in the tooltip.

解决方案

Maybe Your <div class="navn"> has a not enough height. Try to extend that and see what happened. Or set z-index on tooltip.

Set ul{ height: 60px; //for example}. I think it help you.

这篇关于只有一半的悬停菜单出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！