3D tab effect - HTML CSS CSS Widget

Description

3D tab effect
Demo Code

<html>
 <head> 
  <style>
nav {<!--   w  ww . j  av a2 s  .  co  m-->
   border:2px solid Chartreuse;
   height:3em;
   padding:0.9em;
   width:51em;
}

nav ul {
   margin:0;
   padding:0;
   text-align:center;
}

nav li {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
}

nav ul ul {
   font:0/0 serif;
   margin-top:41px;
   padding:0;
   position:absolute;
   top:0em;
   z-index:-2;
   -webkit-transition:all 0.6s ease-in;
   transition:all 0.6s ease-in;
}

nav ul li:hover ul {
   font:inherit;
   z-index:auto;
   color:yellow;
}

nav ul ul li {
   float:none;
   margin-bottom:0.3em;
}

nav a,
nav span {
   background-color:blue;
   border:2px solid pink;
   border-radius:11px 11px 0 0;
   box-shadow:0px 6px 11px white inset;
   color:OrangeRed;
   display:block;
   font-weight:bold;
   margin:0.7em 0 0 0;
   padding:0.5em;
   width:7.5em;
   -webkit-transition:all 0.6s ease-in;
   transition:all 0.6s ease-in;
}

nav ul ul a,
nav ul ul span {
   border-radius:11px;
}

nav a:focus,
nav a:hover,
nav span
 {
   color:grey;
   background-color:BlueViolet;
}

nav a:focus,
nav a:hover {
   margin-top:0;
   padding:2em 0.5em 0.5em;
}

nav ul ul a:hover {
   margin:0.7em 0 0 0;
   padding:0.5em;
}

nav ul ul span {
   background-color:Chartreuse;
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> 
     <ul> 
      <li> <a href="#">Lorem ip</a> </li> 
      <li> <a href="#">Lorem ip</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> 
     <ul> 
      <li> <a href="#">Lorem ip</a> </li> 
      <li> <span>Lorem ipsum do</span> </li> 
      <li> <a href="#">Lorem ip</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem i</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>
3D tab effect - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
