很简单啊，默认的弹窗diplay:none然后hover一有display:block就行了啊，简单代码如下：
html：
<div class="nav"><span>首页</span>
<div class="dialog"></div>
</div>
css：
.dialog{diplay:none}.nav:hover .dialog{diplay:block}
/*不过这个不兼容ie6，因为ie6只支持a的伪属性，当然你也可以用a*/
很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：
在开发者工具中预览效果
我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。
css3实现：
先看最基本的.wxml布局：
从图中可以看到，当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢？就是红圈部分，用translateX位移来移动，而transitions实现一个过渡效果。
curtab就是当前点击tab的index，点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足，就是tab的宽度是固定的，但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现：
有些喜欢折腾的同学说想要js来实现呢？当然也是可以的，用js来实现的思路也是一样，用控制line元素的translateX值。那么怎么知道应为位移多少呢？就是动态的去获取该位移的值，然后赋给translateX。
说到动态的去获取元素额left值，可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。（这里不细说api的用户，不清楚的同学请自行查看文档哈哈哈）
那是不是可以:
来看看具体的实现：
emmm最后说一下，前端时间看到过一个很骚的操作，同样是用纯css实现这种跟随动画，先看看效果图：
.css
一楼的microji,你的下拉菜单很经典,非常谢谢!加入收藏了.纯CSS的下拉菜单 支持IE6 IE7 Firefox,楼主复制看看吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="robots" content="all" />
<title></title>
<style type="text/css">
*{margin:0padding:0}
.menu{font-size:12pxposition:relativez-index:100}
.menu ul{list-style:none}
.menu li {float:leftposition:relative}
.menu ul ul {visibility:hiddenposition:absoluteleft:3pxtop:23px}
.menu table {position:absolutetop:0left:0}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible}
.menu a{display:blockborder:1px solid #aaabackground:#cacacapadding:2px 10pxmargin:3pxcolor:#ffftext-decoration:none}
.menu a:hover{background:#fafafacolor:#000border:1px solid #000}
.menu ul ul{}
.menu ul ul li {clear:bothtext-align:leftfont-size:12px}
.menu ul ul li a{display:blockwidth:100pxheight:15pxmargin:0border:0border-bottom:1px solid #858585}
.menu ul ul li a:hover{border:0background:#fafafaborder-bottom:1px solid #fff}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">首页一</a></li>
<li><a href="#">首页二</a></li>
<li><a href="">首页三</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目二
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目三
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
<div style="clear:both">
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
</div>
</body>
</html>
