Changing padding to add highlight effect to menu item on mouseover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Item

Description

Changing padding to add highlight effect to menu item on mouseover

Demo Code

ResultView the demo in separate window 

<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>

Related Tutorials