JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="Menu">
    <li>1*
        <div class="VisibleOnHover TopLeft">:-)</div>
    </li>
    <li>2</li>
    <li>3*
        <div class="VisibleOnHover Bottom">More Text</div>
    </li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10*
        <div class="VisibleOnHover Bottom">Both</div>
        <div class="VisibleOnHover TopLeft">O.o</div>
    </li>
</ul>


<div style="clear:both;"></div>
<p style="margin: 20px 30px;">
    Demo for <a href="http://stackoverflow.com/q/9563482/7586">Stack Overflow question</a>.<br />
    "*" means additional elements are visible on hover.
</p>

CSS

.Menu {list-style:none; margin: 1em 1em}

.Menu > li {
    float:left; text-align:center; padding: 15px 30px; /* size of the box */
    width: 50px; height: 30px; overflow:hidden; /* fixed size regardless of content*/
    border:solid 1px silver; 
    background-color:white; /* we need a background because boxes are over each other */
    position:relative; z-index:100; /* z-index is needed so hovered boxes are in front of other boxes */
    transition: 0.5s; /* showing off. Not for IE. */
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

.Menu > li:hover {
    padding: 20px 35px 35px; /* larger */
    margin: -5px -5px -20px; /* keep other boxes on same position (this is the real trick here) */
    z-index:110; /* in front of other boxes */
    /* special effects: */
    border-color: #777;
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
    border-radius:3px;
    }

/* Bonus: elements on hover */

.VisibleOnHover {visibility:hidden;opacity:0; 
    background-color:#ff6; border:solid 1px #994; padding:2px 4px; margin: 2px;
    position:absolute;
    font-size:small;
      transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;}

.Menu > :hover > .VisibleOnHover {visibility:visible;opacity:1;}

.VisibleOnHover.Bottom {bottom:0;left:0;right:0;}
.VisibleOnHover.TopLeft {top:0;right:0;}