HTML CSS examples for CSS Widget:Menu
CSS menu background
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navigation {<!-- w w w . jav a 2 s. c o m--> list-style-type:none; margin:0; padding:0; vertical-align:middle; line-height:51px; } #navigation a { text-decoration:none; display:inline-block; padding-bottom:16px; color:Chartreuse; webkit-transition:color 0.5s; -moz-transition:color 0.5s; -ms-transition:color 0.5s; -o-transition:color 0.5s; transition:color 0.5s; } #navigation a:hover { color:yellow; } #navigation li { display:inline-block; float:left; padding-left:10px; padding-right:11px; color:blue; background:pink; webkit-transition:color 0.5s; -moz-transition:color 0.5s; -ms-transition:color 0.5s; -o-transition:color 0.5s; transition:color 0.7s; webkit-transition:background 0.5s; -moz-transition:background 0.5s; -ms-transition:background 0.5s; -o-transition:background 0.5s; transition:background 0.5s; } #navigation li:hover { padding-left:9px; color:OrangeRed; display:inline-block; background:grey; border-left:2px solid BlueViolet; } </style> </head> <body> <div id="navigation"> <li> <a href="">Lorem i</a> </li> <li> <a href="">Lorem i</a> </li> <li> <a href="">Lorem i</a> </li> <li> <a href="">Lorem i</a> </li> <li> <a href="">Lorem i</a> </li> </div> </body> </html>