从交互角度讲很简单，移上去显示，离开隐藏。代码则是两个事件 mouseenter ， mouseleave 。但有个细节，如果触发元素(比如上面Tip里的“更换”)，不包含下面显示的城市列表div的话，鼠标光标离开时就隐藏了，但用户其实是想移动到城市列表里去选另外一个城市。

通常有如下三种实现方式

一、触发元素把后显示的元素包含进来，一般菜单都是这么实现的。因为每个菜单的内容都不一样，这种结构是合理的。这种结构不会出现鼠标移动不到菜单里的情况。如示例1的HTML结构

线上示例： http://snandy.github.io/lib/menu/menu.html

二、触发元素不包含后显示元素，即两者可能是平级的（兄弟元素）。这种结构会出现鼠标移动不到显示元素上。JS需要做些特殊处理。如示例3的HTML结构

线上示例： http://snandy.github.io/lib/menu/tip.html

这种不包含结构往往用在很多相同元素的tip上，这时只要用一个显示元素，不必每个里面都包含相同HTML代码。实现时须注意，div#city和div.citys都要添加mouseenter和mouseleave事件。

三、同二类似，也是延迟一段时间隐藏，当触发div.citys的mouseenter时移除div#city的mouseenter事件，div.citys的mouseleave事件触发时再重新添加上