我这段时间在写一个媒体模板，打算今后替换【转载请注明来源】【本文受版权保护】乌徒邦的主题，让乌徒邦转型做专门的媒体平转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net台。在这个模板撰写过程中，发现了一种直接【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net写css就可以实现以前的下拉菜单的效果。

以前我们实现下拉菜单，使用:hover来【作者：唐霜】【作者：唐霜】控制其显示和隐藏，但是要实现下拉过程的平【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】滑过渡，而不是突然出现，则常常希望平滑的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】下拉和收缩。我以前使用jquery的sl转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ideUp/slideDown或者ani著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】mate来实现，但是其实这种效率比较低，【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】下拉和收缩都没有那么敏锐。后来，我写了一未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。段css，实现了同样的效果，如下：

<div class="nav">
  <ul class="menu">
  <li><a href="index.html">首页</a></li>
  <li class="menu-item-has-children"><a href="parent.html">新闻</a>
    <ul class="sub-menu">
      <li><a href="child.html">聚焦<span>热门媒体事件</span></a></li>
      <li><a href="child.html">学界<span>新闻传播学最新科研报道</span></a></li>
      <li><a href="child.html">外媒<span>国外媒体的发展</span></a></li>
      <li><a href="child.html">新媒态<span>新闻媒体业界创意颠覆</span></a></li>
    </ul>
  </li>
  <li><a href="parent.html">产品</a></li>
  <li><a href="parent.html">访谈</a></li>
  <li><a href="parent.html">专栏</a></li>
  </ul>
</div>

css如下来写：【转载请注明来源】

.nav {
  clear: left;
  float: left;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.nav ul li {
  display: inline;
  margin-right: 35px;}.nav ul li a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
}
.nav ul li a:hover {
  color: #DF3120;
}
.nav ul li.menu-item-has-children > a:after {
  content:"";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #000;
  font-size: 0;
  line-height: 0;
  margin-left: 5px;
  transition: all .2s;
}
.nav ul li.menu-item-has-children > a:hover:after {
  border-top-color: #DF3120;
}
.nav ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1124px;
  margin-top: -1px;
  background-color: #fff;
  height: 0;
  overflow: hidden;
  transition: all .2s;
}
.nav li:hover ul.sub-menu {
  padding-top: 20px;
  height: 60px;
}
.nav ul.sub-menu li {
  float: left;
}
.nav ul.sub-menu li a span {
  display: block;
  font-size: .8em;
  font-weight: normal;
  color: #a9a9a9;
  transition: color .2s;
}

上面红色的css代码，即实现了我们要的下【本文受版权保护】【本文首发于唐霜的博客】拉效果。

2015-10-27 6987