2

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: As you can see, only upper half is appearing

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.

lost_in_the_source
  • 10,998
  • 9
  • 46
  • 75
  • Remove `z-index: 1;` and you may as well remove `position: absolute` also because I don't see a `position: relative;` – EternalHour Dec 04 '14 at 22:54
  • You can still style a title attribute. Take a look at this question [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) – starwarspunk Dec 04 '14 at 22:55
  • @EternalHour if i remove the position:absolute, then the "tooltip" appears right inside of the button. I dont want that. – lost_in_the_source Dec 04 '14 at 23:21

1 Answers1

1

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.

st_filip
  • 26
  • 3