HTML CSS examples for CSS Widget:Nav Bar
Navigation bar anchors in justified list
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #menu {<!--from w w w . j av a2s . com--> outline:2px solid red; } #menu ul { padding:0; display:table; width:100%; } #menu-list li { height:46px; width:181px; list-style:none; display:table-cell; text-align:center; font-family:arial; font-size:15px; margin-right:3px; } #menu-list li a { display:block; height:100%; padding-top:14px; color:Chartreuse; text-decoration:none; background-color:yellow; } #menu-list li:not(:last-child) { padding-right:3px; } #menu-list li:active { color:blue; background-color:pink; } #menu-list li a:hover { background:OrangeRed; } #menu-list li.current { background-image:-webkit-linear-gradient(top, grey, rgb(7, 102, 244)); background-color:BlueViolet; } </style> </head> <body> <div id="menu"> <ul id="menu-list"> <li id="home"> <a href="#">Lore</a> </li> <li id="townoffice"> <a href="#">Lorem ipsum</a> </li> <li id="busines"> <a href="#">Lorem ip</a> </li> <li id="residents"> <a href="#">Lorem ips</a> </li> <li id="tourists"> <a href="#">Lorem ip</a> </li> </ul> </div> </body> </html>