Slide menu list
By Marcin Olejarz
If you press on this list on top label, here will show slide menu. Instead of text you can place there a link.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
display:table;
position:relative;
}
li {
background-color:lightgreen;
border:1px lightgrey solid;
line-height:30px;
width:100px;
padding:0px 0px 0px 10px;
}
.toplabel {
display:table-cell;
}
ul li ul {
list-style:none;
display:none;
position:absolute;
}
.toplabel:hover ul {
display:table-cell;
}
.toplabel ul li {
margin-left:-45%;
border:none;
}
.info {
display:none;
}
</style>
</head>
<body>
<ul id="main">
<li class="toplabel">#First
<ul>
<li>#First -> 1</li>
<li>#First -> 2</li>
<li>#First -> 3</li>
</ul>
</li>
<li class="toplabel">#Second
<ul>
<li>#Second -> 1</li>
<li>#Second -> 2</li>
<li>#Second -> 3</li>
</ul>
</li>
<li class="toplabel">#Third
<ul>
<li>#Third -> 1</li>
<li>#Third -> 2</li>
<li>#Third -> 3</li>
</ul>
</li>
</ul>
</body>
</html>