投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 菜单导航 / 漂亮的纯CSS3下拉导航菜单展开动画特效
漂亮的纯CSS3下拉导航菜单展开动画特效
标签:

插件介绍

    这是一款个性又漂亮的CSS3下拉导航菜单展开动画特效,鼠标悬停时二级子菜单有多种炫酷的展开动画效果,代码还简单,需要的朋友赶紧放到自己网站上使用吧。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-15
    阅读:

漂亮的纯CSS3下拉导航菜单展开动画特效

简要教程

这是一款个性又漂亮的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>