HTML CSS examples for CSS Widget:Nav Bar
CSS Gradient Nav Design
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from w w w . j a va 2 s . c o m--> width:351px; border:2px solid Chartreuse; } .left-nav { list-style-type:none; } .left-nav li { width:251px; height:51px; margin:0 0 11px; } .left-nav li a { background-image:linear-gradient( to right, yellow, blue, pink, OrangeRed ); line-height:51px; color:grey; text-decoration:none; text-align:center; display:block; border-top-left-radius:6px; border-bottom-left-radius:6px; letter-spacing:2px; -webkit-box-shadow:0 8px 5px -5px BlueViolet; -moz-box-shadow:0 8px 5px -5px Chartreuse; box-shadow:0 8px 5px -5px yellow; } .left-nav li a:hover { color:blue; background-image:linear-gradient( to right, pink, OrangeRed, grey, BlueViolet ); } </style> </head> <body> <div class="container"> <ul class="left-nav"> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem ip</a> </li> <li> <a href="">Lorem ip</a> </li> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem ipsu</a> </li> </ul> </div> </body> </html>