Create navigation with hover effect to enlarge and offset menu bar item - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

Create navigation with hover effect to enlarge and offset menu bar item

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">
body {<!--from w ww  . java 2 s  .  c o  m-->
   background-color:Chartreuse;
   font:16px/131% Arial, sans-serif;
}

a {
   color:yellow;
   text-decoration:none;
   display:block;
   float:left;
   width:100px;
   background-color:blue;
   text-align:center;
   z-index:0;
   position:relative;
   padding:6px;
   border-radius:0 0 11px 11px;
   -moz-border-radius:0 0 11px 11px;
   box-shadow:0 0 6px pink;
   -webkit-transition:all 501ms ease;
   -moz-transition:all 501ms ease;
   position:relative;
   top:8px;
}

li {
   height:3px;
   background-color:OrangeRed;
   display:block;
   float:left;
   -webkit-transition:all 501ms ease;
   -moz-transition:all 501ms ease;
   margin:0 6px;
}

ul {
   border-top:6px solid grey;
   border-bottom:6px solid BlueViolet;
   position:absolute;
   background-color:Chartreuse;
}

li:hover {
   background-color:yellow;
   box-shadow:0 0 5px blue;
}

a:hover {
   padding-top:16px;
}
</style> 
 </head> 
 <body> 
  <div class="overlay"></div> 
  <ul class="nav"> 
   <li> <a href="#">Lore</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem i</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials