HTML CSS examples for CSS Widget:Hover Effect
Center navigation bar with hover effect
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #nav_bar {<!-- w w w. ja v a 2 s. c o m--> display:block; height:51px; margin:0 auto; width:568px; } #nav_bar ul { display:inline-block; list-style-type:none; border:2px solid Chartreuse; width:566px; height:100%; text-align:center; padding:0; margin:0; } #nav_bar li { display:inline; height:100%; padding:0; margin:0; } #nav_bar a:hover { background-color:yellow; } #nav_bar a { display:inline-block; height:100%; color:blue; text-decoration:none; line-height:51px; padding:0 2em 0 2em; background-color:pink; } </style> </head> <body> <div id="nav_bar"> <ul> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem ipsum d</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </div> </body> </html>