Animated PopOver Menu List CSS3
------------------------------------------DEMO-----------------------------------------------------
------------------------------------------CSS3-----------------------------------------------------
html, body { min-height:100%; }
h1 { color:#FFF; }
html, body, div, h3, small, ul, li, section { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
body { background:#666; font:12px Arial, Helvetica, sans-serif; }
ul { list-style:none; }
.container { margin:100px 0 50px; width:200px; text-align:center; }
.container .user { text-align:left; }
.user { position:relative; height:32px; padding:8px 12px 8px 8px; display:inline-block; vertical-align:baseline; zoom:1; *display:inline;
*vertical-align:auto; }
.user img { float:left; width:62px; height:62px; margin-right:8px; }
.user h3 { float:left; line-height:16px; font-size:16px; font-weight:bold; color:white; text-shadow:0 1px rgba(0, 0, 0, 0.4); }
.user h3 small { display:block; font-size:12px; font-weight:bold; text-transform:uppercase; color:#364168; color:rgba(0, 0, 0, 0.6);
text-shadow:0 1px rgba(255, 255, 255, 0.3); }
.user:hover ul { padding:4px 0 6px; visibility:visible; opacity:1; }
.user ul { visibility:hidden; opacity:0; position:absolute; bottom:100%; left:0; right:0; background:#fff; border:1px solid; border-color:#777 #6c6c6c #666;
border-radius:5px; -webkit-transition:0.2s ease-out; -moz-transition:0.2s ease-out; -o-transition:0.2s ease-out; transition:0.2s ease-out;
-webkit-transition-property:opacity, padding, visibility; -moz-transition-property:opacity, padding, visibility; -o-transition-property:opacity, padding, visibility;
transition-property:opacity, padding, visibility; -webkit-box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1); }
.user ul:before, .user ul:after, .user li:first-child:after { content:''; display:block; position:absolute; left:15px; width:0; height:0; border:7px outset transparent; }
.user ul:before { bottom:-14px; border-top:7px solid #555; }
.user li:first-child:after { bottom:-13px; border-top:7px solid white; }
.user ul:after { bottom:-12px; border-top:7px solid #d9e3fa; }
.user li { padding:0 12px; font-size:11px; color:#838ca2; text-shadow:0 1px white; }
.user li.sep { margin-top:4px; padding-top:4px; border-top:1px solid #b4bbce; -webkit-box-shadow:inset 0 1px rgba(255, 255, 255, 0.6);
box-shadow:inset 0 1px rgba(255, 255, 255, 0.6); }
.user li a { display:block; position:relative; margin:0 -13px; padding:0 20px 0 12px; color:#313a4f; text-decoration:none; border:1px solid transparent; }
.user li a:hover { color:white; text-shadow:0 1px rgba(0, 0, 0, 0.3); background:#000; }
.user li a:hover:after { display:block; }
.user li a:after { content:''; display:none; position:absolute; top:50%; right:5px; margin-top:-4px; width:0; height:0; border:4px solid transparent;
border-left-color:#9facd1; border-left-color:rgba(255, 255, 255, 0.4); }
------------------------------------------HTML5-----------------------------------------------------
<h1>Animated PopOver Menu List CSS3</h1>
<section class="container">
<div class="user">
<img src="muthu.png">
<h3>Muthukumar<small>Web Designer</small></h3>
<ul>
<li>
<li>
<li>
<li class="sep">02 Jan 1982</li>
</ul>
</div>
</section>
------------------------------------------IMAGE-----------------------------------------------------
