CSS: a calendar with an unordered list

In this post I'm going to create a calendar with CSS using an unordered list as the underlying markup. I'd like to say since now that this choice is non-semantical, because the most appropriate way to build up a calendar is with an HTML table. This is just a demo on the use of multiple floats and effects on hover. Let's start with our markup:

<ul id="calendar">
<li class="day">Sun</li>
<li class="day">Mon</li>
<li class="day">Tue</li>
<li class="day">Wed</li>
<li class="day">Thu</li>
<li class="day">Fri</li>
<li class="day">Sat</li>

<li><a href="#">1<span class="todo">Do this</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4<span class="todo">Do this and even that</span></a></li>
<li><a href="#">5<span class="todo">Do other things</span></a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>

<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11<span class="todo">Do this but not that</span></a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>

<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21<span class="todo">Do this, that and all</span></a></li>

<li><a href="#">22</a></li>
<li><a href="#">23</a></li>
<li><a href="#">24</a></li>
<li><a href="#">25</a></li>
<li><a href="#">26</a></li>
<li><a href="#">27</a></li>
<li><a href="#">28<span class="todo">Do your homework</span></a></li>

<li><a href="#">29</a></li>
<li><a href="#">30</a></li>
<li><a href="#">31</a></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>

In this list are contained days (with the .day class), numbering of days, to-do messages (that will be first hidden and then revealed on hover) and empty elements. Here's our CSS:

#calendar {
    width: 28em;
    margin: 2em 0;
    padding: 0;
    list-style: none;
    height: 100%;
    overflow: hidden;
    font: 100% Arial, sans-serif;
    position: relative;
}

#calendar li {
    width: 4em;
    height: 4em;
    float: left;
    display: block;
    margin: 0;
}

#calendar li.day {
 background: #ffffa0;
 text-align: center;
 line-height: 4;
 font-weight: bold;
 font-variant: small-caps;
}

#calendar li a {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    line-height: 4;
    color: #000;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

#calendar li a span {
 display: block;
 background: yellowgreen;
 width: 100%;
 text-align: center;
 cursor: help;
 position: absolute;
 top: -1000em;
 color: white;
 font-weight: bold;
}

#calendar li a:hover span {
 top: 0;
 left: 0;
}

#calendar li.empty {background: #ccc;}

As you can see, it's all about floats and contextual positioning, used here to show the to-do messages when a user hovers certain days with his/her mouse. Since our calendar is made up of rows, each one with seven boxes, the overall width of each row must match the global width of the calendar (28em), so each box will be exactly 4em wide.

Demo

Live demo