Pure CSS HTML Animated Dropdown Menu

 Courses / Web Development /HTML5 Tutorials

Pure CSS HTML Animated Dropdown Menu

Pure CSS HTML Animated Dropdown Menu without javacsript and jquery in Delhi

Pure CSS HTML Animated Dropdown Menu

  • home
    • home
      • home
      • home
      • home
      • home
    • home
    • home
    • home
      • home
      • home
      • home
      • home
  • home
  • home
  • home

Coding of this example

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@keyframes myanimation{ 0%{height:0;overflow:hidden; } 99.99%{height:200px;overflow:hidden; } 100% {height:200px;overflow:visible; } } ul{width:800px; height:50px; padding:0; margin:0; } li{width:200px; height:50px; float:left; list-style-type:none;line-height:50px; background-color:red; text-align:center; color:white; } li:hover {background-color:yellow; color:red; } ul li ul{height:0px; overflow:hidden; width:200px; } ul li ul li{ position:relative; } ul li ul li ul{position:absolute; left:200px; top:0; } ul li:hover ul{height:200px; animation:myanimation 2s; overflow:visible; } ul li:hover ul li ul{display:none; } ul li ul li:hover ul{display:block; } </style>
</head>
<body>
<ul>
<li>home
<ul>
<li>home1
<ul>
<li>homea</li>
<li>homeb</li>
<li>homec</li>
<li>homed</li>
</ul>
</li>
<li>home2</li>
<li>home3</li>
<li>home4
<ul>
<li>homee</li>
<li>homef</li>
<li>homeg</li>
<li>homeh</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</body>
</html>

HTML5 circle Courses in Delhi