<div id="container"> <div id="dashboard"> <ul class="menu"> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_bet01.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_bet02.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_bet03.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_bet04.png"></a></li> </ul> <ul class="menu"> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_table01.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_table02.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_table03.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_table04.png"></a></li> </ul> <ul class="menu"> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair01.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair02.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair03.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair04.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair05.png"></a></li> <li><a class="icon" href="#"><img src="http://iideacraft.com/blog-img/icon_chair06.png"></a></li> </ul> </div> </div>
body { background: #37495e; } #container { width: 80%; margin: 50px auto; } #dashboard { padding: 20px; } .menu { display: table; width: 100%; } .menu li { display: table-cell; vertical-align: top; } .menu li { border-top: 2px solid #2c3c50; border-right: 2px solid #2c3c50; } .icon { display: block; padding: 20px; text-align: center; border-top: 2px solid #415266; border-right: 2px solid #415266; } .icon img { width: 100%; vertical-align: bottom; } .icon img:hover { opacity: .5; } .menu:first-child li, .menu:first-child .icon { border-top-color: transparent; } .menu li:last-child, .menu li:last-child .icon { border-right-color: transparent; }