Live Example:

Source Code: (Save the Source)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-Only Calendar</title>
<style>
html {
   font-size: 62.5%; }
body {
   font: 1.2em/1.3 Arial, Helvetica, sans-serif;
   background-color: #cef;
   padding: 2em 0 0 2em; }
h1 {
   font-size: 2.5em;
   margin: 0; }
#calendar {
   margin: 0;
   padding: 0;
   width: 700px;
   border: 2px solid #333;
   background-color: #ddd; }
#calendar li {
   list-style-position: inside;
   font-weight: bold;
   width: 88px;
   height: 88px;
   border: 1px solid #999;
   float: left; 
   background-color: #fff; 
   padding: 5px;
   overflow: hidden; }
#calendar li:hover {
   overflow: visible; }
#calendar li ul {
   margin: 0;
   padding: 0;
   clear: both; }
#calendar li ul li {
   list-style: none;
   font-weight: normal;
   float: none;
   border: none;
   padding: 5px 0;
   margin: 0; }
#calendar li:hover ul li, #calendar li.hover ul li {
   position: absolute;
   width: 150px;
   margin-left: -38px;
   height: auto;
   background-color: #8cf; 
   border: 1px solid #069;
   padding: 10px;
   z-index: 10; } 
#calendar li.sunday {
   margin-left: 0; }
#calendar li.monday {
   margin-left: 100px; }
#calendar li.tuesday {
   margin-left: 200px; }
#calendar li.wednesday {
   margin-left: 300px; }
#calendar li.thursday {
   margin-left: 400px; }
#calendar li.friday {
   margin-left: 500px; }
#calendar li.saturday {
   margin-left: 600px; }
.clear { 
   clear: both; }
</style>
</head>
<body>
<h1>December 2008</h1>
<ol id="calendar">
   <li class="monday">
      <ul>
         <li>Rent due!</li>
      </ul>
   </li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>
      <ul>
         <li>Vet Appointment at 3pm with Fuzzy.</li>
      </ul>
   </li>
   <li>&nbsp;</li>
   <li>Pearl Harbor Remembrance Day</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>
      <ul>
         <li>Dinner with the boss: 7pm sharp! 1234 Any Street. Bring notes from the conference.</li>
      </ul>
   </li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>Winter Begins, Hanukkah Begins</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>Christmas Eve</li>
   <li>Christmas Day
      <ul>
         <li>Dinner at Grandma's House.</li>
      </ul>
   </li>
   <li>Boxing Day, Kwanzaa Begins</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>New Year's Eve</li>
   <div class="clear"></div>
</ol>

</body>
</html>