HTML CSS examples for CSS Widget:Div Table
Create table layout with UL and DIV
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <!--from w ww . java2s .c o m--> <body> <style> html, body { box-sizing:border-box; margin:0px; padding:0px; } ul { list-style-type:none; margin:0px; } ul li { background:yellow; border:2px solid Chartreuse; float:left; height:201px; margin:0 11px 11px 0; position:relative; width:23%; } ul li .more { background:red; border-bottom:2px solid yellow; border-left:2px solid blue; border-right:2px solid pink; bottom:-51px; display:none; height:51px; left:-2px; position:absolute; width:100%; } ul li:hover .more { display:block; z-index:2; } </style> <ul> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> <li> <div class="more"> my </div> </li> </ul> </body> </html>