Css Navigation Menu with Animated Dropdown

Hi Bloggers, you can only make a website / blog user friendly if there is any easy navigation to your main category links. So navigation menu is a must in every template. We're sharing this lightest weight menu bar. As no JavaScript is used in creating this navbar.
dropdown navigation menu with CSS Transitions

Adding Css Navigation Menu bar with smooth effects

Search for paste below css code above it.
/* CSS Navigation Menu */ .nav-menu ul {list-style:none; margin:12px 0 0; border-radius:6px; padding:0; background:#f4f4f4;} .nav-menu ul:before,.nav-menu ul:after {content:""; display:table;} .nav-menu ul:after {clear:both;} .nav-menu ul li {float:left; position:relative;} .nav-menu a {display:block; padding:10px 20px; line-height:1.2em; font-weight:600; letter-spacing:.2px; color:#555; border-right:1px solid #ddd;} .nav-menu a:hover {text-decoration:none; background:#fff;} .nav-menu li ul {position:absolute; left:0; top:24px; border-radius:0 0 4px 4px; z-index:1; background:#333;} .nav-menu li ul li {overflow:hidden; max-height:0; -webkit-transition:max-height 500ms ease; -moz-transition:max-height 500ms ease; -o-transition:max-height 500ms ease; transition:max-height 500ms ease;width:160px;} .nav-menu li ul a {border:none; color:#fff; font-weight:500;} .nav-menu li ul a:hover {background:rgba(0,0,0,0.2);} .nav-menu ul li:hover ul li {max-height:150px;} .nav-menu .home, .home a:hover {background:#fff; border-radius:6px 0 0 6px; } .pul:after {border-color: #777 transparent transparent; border-image: none; border-style: solid; border-width: 4px; content: ""; height: 0; margin-left: 5px; margin-top: -2px; position: absolute; top: 50%; width: 0;} Search for paste below html code above it. Or paste it where ever you want the nav-bar to appear!
<div class='nav-menu'><ul> <li class='home'><a href='#'>Home</a></li> <li><a href='#' class='pul'>Gadgets</a> <ul> <li><a href='#'>Sub-Menu 1</a></li> <li><a href='#'>Sub-Menu 2</a></li> <li><a href='#'>Sub-Menu 3</a></li> </ul> </li> <li><a href='#'>Social</a></li> <li><a href='#' class='pul'>Internet</a> <ul> <li><a href='#'>Sub-Menu 1</a></li> <li><a href='#'>Sub-Menu 2</a></li> <li><a href='#'>Sub-Menu 3</a></li> </ul> </li> </ul></div> Live Demo

Subscribe for our Newsletter

Back to top