JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="menu_wrapper">
  <div class="dropdown_trigger">
    <div class="title">Information</div>
    <div>
      This is the information that should be shown when you mouse over. And this is even more that you might want to see. You can read this easily.
    </div>
  </div>

  <div class="dropdown_trigger">
    <div class="title">About</div>
    <div>
      This is the ABOUT information that should be shown when you mouse over. And this is even more that you might want to see. You can read this easily. This is a lot of text, very long. This is a lot of text, very long. This is a lot of text, very long. 
    </div>
  </div>

  <div class="dropdown_trigger">
    <div class="title">Services</div>
    <div>
      This is the SERVICES information, just a little text.
    </div>
  </div>
</div>

CSS

body {
  padding: 20px;
}

div.dropdown_trigger {
  width: 200px;
  max-height: 25px;
  background: #ddd;
  transition: max-height .2s;
  overflow: hidden;
  cursor: help;
  padding: 2px 5px 5px 5px;
  float: left;
  margin: 0 2px 0 0;
}

div.dropdown_trigger:hover {
  max-height: 500px;
}

div.dropdown_trigger .title {
  font-weight: bold;
}