On hover event calendar using css

This is one of the simple way to display the list of events using calendar icon. This also use to display the event description on hover the calendar icon.

It is very useful to display the list of holidays and events in calendar type instead of displaying in the text format. and also description in the format of hover the particular calendar.

Html Code:

<div class="row">
<div class="balloon">
<div class="monthName">LIST OF HOLIDAYS IN JULY</div>
<ul>
<li>
<a href="#">6
</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd><p>Hari Raya Puasa
- Holiday (W)sdf sdf sdfsfsdf sdfsdf sdfsdf sdf sdf sdf sdfsd fsdfsdf sdsd f  fsdfd</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">18</a>

<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>CBSE 11 and 12
return, IB 2 return</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">19</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>UNSW English
Exam (P, S, SR, IB1,
IB2)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">25
</a>
<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>School resumes (EY, P)<br />
School Resumes Senate
Election Process starts (S)<br />
XII CBSE - SA 1 Starts (SR)<br />
New IB Year 1 Start<br />
CC - Gr 12 Submission of
First draft of College list
</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">26
</a>

<table><tr><td>
<dl id="web4" class="rtAlign">
<dd>
<p>OBT Gr 2 to 5 begins (P) </p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">
28
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>Senate Election (S)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">
29
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>OBT Gr 2 to 5 (P)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">29
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>UT1-Portfolio sent home<br />
Investiture and Valediction
Ceremony (S)<br />
Orientation - Grade-IBDP
Year 1 - 5 pm<br />
Sec.Auditorium (IB1)<br />
English L&L- HL- 1st draft of
2nd WT (IB2)</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
<li>
<a href="#">30
</a>
<table><tr><td>
<dl id="web4">
<dd>
<p>OBT Gr 2 to 5 (P) ends</p>
<em></em>
</dd>
</dl>
</td></tr></table>
</li>
</ul>
<div class="clear"></div>
</div>
</div>

Css Code:

.balloon {
    margin: 0 auto;
    padding-bottom: 35px;
background-color: #fff;
background-image: none;
width: 100%;
}
.balloon ul {
    border: 0 none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.balloon ul li, .balloon ul li.last {
    float: left;
    height: 40px;
    margin: 0 8px 10px 0;
    text-align: center;
    width: 40px;
}

.balloon ul li a, .balloon ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:59px;
height:49px;
color:#000;
background:#fff;
background-image: url(../images/date_bg_rev.png);
background-position: top left;
background-repeat: no-repeat;
padding-top: 16px;
}
.balloon ul li a img, .balloon ul li a:visited img {
border:0;
}

.balloon ul li dl {
visibility:hidden;
position:absolute;
}

table {
margin:-2px;
border:0;
padding:0;
border-collapse:collapse;
font-size:1em;
}

.balloon dl {width:155px; padding:0 0 20px 0; background:transparent url

(bottom.gif) no-repeat bottom left; height:auto;}
.balloon dt {margin:0; padding:5px; font-size:1.4em; font-weight:bold;

color: #000; background:transparent url(top.gif) no-repeat top

left; text-align:center;}
.balloon dd {margin:0; padding:5px; color:#fff; font-size:14px; font-weight: bold; text-align: left; line-height: 18px;

border:1px solid #eee; border-width:1px; background:#369; background: #000; color:#fff;
}
.balloon dd p {padding:0; margin:5px 0; line-height:auto;}
.balloon dl#web2 {background:transparent url(bottom2.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web3 {background:transparent url(bottom3.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web4 {background:transparent url(bottom4.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web5 {background:transparent url(bottom5.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web6 {background:transparent url(bottom6.gif) no-

repeat bottom left; height:auto;}
.balloon dl#web2 dt {background:transparent url(top2.gif) no-

repeat top left;}
.balloon dl#web3 dt {background:transparent url(top3.gif) no-

repeat top left;}
.balloon dl#web4 dt {background:transparent url(top4.gif) no-

repeat top left;}
.balloon dl#web5 dt {background:transparent url(top5.gif) no-

repeat top left;}
.balloon dl#web6 dt {background:transparent url(top6.gif) no-

repeat top left;}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */

/* for new design */

.balloon ul li.last {
margin-right: 0;
}
.balloon ul li a, .balloon ul li a:visited {
background-image:url(cal_sq_bg.png);
background-position: left top;
background-repeat: no-repeat;
    color: #000;
    display: block;
    height: 40px;
    padding-top: 0px;
    text-decoration: none;
    width: 40px;
font-family: Fjalla One, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #000;
font-weight:normal;
line-height:47px;

}
.balloon ul li:hover, .balloon ul li a:hover {
background-image:url(cal_sq_bg.png);
    background-position: left -45px;
    background-repeat: no-repeat;
    color: green;
    cursor: pointer;
    position: relative;
}
.balloon ul li:hover dl,
.balloon ul li a:hover dl {
visibility:visible;
color:#000;
top: 20px;
left:-155px;
cursor:default;
}
#leftNavArea .balloon ul li:hover dl,
#leftNavArea .balloon ul li a:hover dl {
visibility:visible;
color:#000;
top: 20px;
left:-105px;
cursor:default;
}
.balloon ul li:hover dl.rtAlign,
.balloon ul li a:hover dl.rtAlign {
visibility:visible;
color:#000;
top:-25px;
left:70px;
top: 20px;
left:40px;
cursor:default;
}
#leftNavArea .balloon ul li:hover dl.rtAlign,
#leftNavArea .balloon ul li a:hover dl.rtAlign {
visibility:visible;
color:#000;
top:-25px;
left:70px;
top: 20px;
left:40px;
cursor:default;
}
.balloon ul li a.small {
height: 36px;
    font-size: 14px;
    line-height: 14px;
    padding-top: 6px;
}
.monthName {
clear:both;
font-family: Fjalla One, Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 3px 0 3px;
border-bottom: 1px dotted #484848;
margin-bottom: 5px;
letter-spacing: 1px;
}