我这段时间在写一个媒体模板，打算今后替换乌徒邦的主题，让乌徒邦转型做专门的媒体平台。在这个模板撰写过程中，发现了一种直接写css就可以实现以前的下拉菜单的效果。

以前我们实现下拉菜单，使用:hover来控制其显示和隐藏，但是要实现下拉过程的平滑过渡，而不是突然出现，则常常希望平滑的下拉和收缩。我以前使用jquery的slideUp/slideDown或者animate来实现，但是其实这种效率比较低，下拉和收缩都没有那么敏锐。后来，我写了一段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 6936