HTML CSS examples for CSS Widget:Nav Bar
Navbar links with the same height
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *, *:before, *:after {<!--from ww w .j ava2 s. com--> -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } #first-level-navigation { display:table; } #first-level-navigation .mega-link { background:linear-gradient(181deg, yellow 0%, blue 61%, pink 100%) repeat scroll 0 0 Chartreuse; border:2px solid OrangeRed; padding:0; text-transform:uppercase; width:26%; display:table-cell; vertical-align:middle; } #first-level-navigation .mega-link a { color:grey; display:inline-block; padding:11px; text-align:center; text-decoration:none; width:100%; } </style> </head> <body> <nav role="navigation" class="block-group" id="first-level-navigation"> <div class="block mega-link active"> <a href="#">Lorem</a> </div> <div class="block mega-link"> <a href="#">Lorem ip</a> </div> <div class="block mega-link"> <a href="#">Lorem i</a> </div> <div class="block mega-link"> <a href="#">Lorem ipsum dolor sit a</a> </div> </nav> </body> </html>