Add a hover on the nav to morph - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

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

Description

Add a hover on the nav to morph

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
#header {<!--from  w ww  .  ja v  a2s  .c  o  m-->
   height:111px;
   width:100%;
   background:Chartreuse;
   border-bottom:5px solid yellow;
}

#header ul {
   height:100%;
   margin:0 auto;
   width:71%;
   list-style:none;
}

#header ul li {
   transform:translate(0px, 31px);
   float:left;
   width:calc(81% / 6);
   color:blue;
   padding:3%;
}

#header ul li a {
   text-align:center;
   display:block;
   height:auto;
   background:pink;
}

#header ul li a:hover {
   display:block;
   border-radius:11px;
}

#header ul li a.logo {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-size:contain;
   height:91px;
   display:block;
   margin-top:-26px;
   text-align:center;
   padding:0;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="header" class="clearfix"> 
   <ul> 
    <li> <a href="index.html">Lore</a> </li> 
    <li> <a href="index.html">Lorem</a> </li> 
    <li> <a class="logo" title="description" href="index.html"></a> </li> 
    <li> <a href="index.html">Lorem</a> </li> 
    <li> <a href="index.html">Lorem i</a> </li> 
   </ul> 
  </div> 
  <!--end header-->  
 </body>
</html>

Related Tutorials