Question

I am building CSS hover menu where sub level ul parent has set line-height & font-size in ems:

#menu li a{
    font-size:1.3em;
    line-height: 2em;
    padding: 0 0.7125em;
    color: black;
} 

I am experiencing difficulties with calculating exact top value for ul.sub so on hover it appears on the bottom edge of it’s parent container:

#menu ul ul{
    position: absolute;
    top: 2em;
}

This top value makes it appear 10% or so inside parent’s container. What I am wondering is there a way to calculate exact value knowing parent’s line-height & font-size values??

This is what HTML structure looks like.

<nav id='menu'>
    <ul class='top'>
        <li><a href='#'>Item0</a></li>
        <li>
            <a href='#'>Item1</a>
            <ul class='sub'>
                <li><a href='#'>Item0</a></li>
                <li><a href='#'>Item1</a></li>
            </ul>
        </li>
        <li><a href='#'>Item2</a></li>
        <li><a href='#'>Item3</a></li>
        <li><a href='#'>Item4</a></li>
    </ul>   
</nav>

Answer 1

EUREKA!!! moment.. sorry guys.

SOLUTION is: top: 100%; 😉

peace&love