HTML CSS examples for CSS Widget:Menu Item
Changing padding to add highlight effect to menu item on mouseover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a {<!--from w ww . j a v a 2s. c o m--> text-transform:none; text-decoration:none; color:#F1EFED; padding: 10px; background-color: #84c225; transition: all 0.3s; border-bottom: 0px solid #97e127; } a:hover { padding-bottom: 4px; border-bottom-width: 6px; } </style> </head> <body> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Us</a> </body> </html>