这是一款个性又漂亮的CSS3下拉导航菜单展开动画特效,鼠标悬停时二级子菜单有多种炫酷的展开动画效果,代码还简单,需要的朋友赶紧放到自己网站上使用吧。
使用方法
在页面引入以下style.css样式文件
<link rel="stylesheet" href="css/style.css">
HTML代码
<nav> <ul class="main"> <li> <a href="#">Home</a> <ul class="drop menu1"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">news</a> <ul class="drop menu2"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">contact</a> <ul class="drop menu3"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">works</a> <ul class="drop menu4"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">team</a> <ul class="drop menu5"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> <li><a href="#">about</a> <ul class="drop menu6"> <li><a href="#">Home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </li> </ul> </nav>