Info hover state

With a span

by Joshua Powell

HTML

<ul class="mainNav">
    <li>Some Text1
        <ul class="subNav">
            <li>Sub Nav1
                <span class="info">Here is some info about this tab.This tab was first built during the ancient egyption times. Durring then the web viewing community was very different then you and I. The only similarity between them and us is that IE is exactly how they made it still to this day.</span></li>
            <li>Sub Nav1
                <span class="info">Yeah I don't know, I'm just filler text.</span>
            </li>
            <li>Sub Nav1
                <span class="info">Here is a crazy statment! Oh, I just forgot.</span>
            </li>
        </ul>
    </li>
    <li>Some Text2
        <ul class="subNav">
            <li>Sub Nav1
                <span class="info">This should be what you are looking for so I ask you, "What's it going to be punk".</span></li>
            <li>Sub Nav1
                <span class="info">I'M A REALLY SMALL LINE OF TEXT!!!!!!! (or am I?)</span>
            </li>
            <li>Sub Nav1
                <span class="info">Here is some info about this tab.This tab was first built during the ancient egyption times. Durring then the web viewing community was very different then you and I. The only similarity between them and us is that IE is exactly how they made it still to this day.</span>
            </li>
        </ul>
    </li>
</ul>

CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

.mainNav > li {
    background: mediumSeaGreen;
    position: relative;
    width: 100px;
    display: block;
    line-height: 300%;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.6);
}

li > ul {
    display: none;
}

.mainNav > li:hover .subNav {
    display: block;
}

.subNav {
    position: relative;
    background: #c1c1c1;
    z-index: 100;
}

.subNav .info {
    display: none;
}

.subNav li:hover {
    background: #4b4b4b;
    color: #c1c1c1;
}

.subNav li:hover .info {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    color: #2b2b2b;
    width: 300px;
    background: rgba(0, 0, 0, 0.2);
    line-height: 175%;
    padding: 10px;
    text-align: justify;
}