首先，楼上说得很对，你之所以出现图片抖动的原因是因为，border变为2px的时候，整个盒子的width和height都变了，浏览器对整个排版会重新解析，导致这个盒子和出现一些挤压。
细说一下，浏览器对盒模型的解析，会影响盒子的width宽度、height高度的属性有边框(border)、内补丁(padding)、外补丁(margin)。显然一个盒子真实宽度=width+border*2+margin*2；真实高度=height+border*2+margin*2；而padding是只会影响内容的编排，
举例说明，我定义了一个宽度高度都是100px的div，margin，border，padding都是10px；最后在火狐的视图下看和模型，浏览器的解析结果是120px，如图所示：
<div style="width:100pxheight:100pxborder:10pxmargin:10pxpadding:10px"></div>总言之，为了防止你出现图片的抖动，主要就是要达到鼠标放上去之后的盒子的总宽度和总高度是不变的才行：
所以我的意见是：
<style type="text/css">#box{width:100pxheight:100pxborder:1px solid #ccc}
#box:hover{width:98pxheight:98pxborder:2px solid #ccc}
</style>
<div id="box"></div>
你可以试一下，不懂欢迎再和我探讨……
这个是hover的问题你hover一级的时候二级出现，但是离开一级，二级肯定消失了，所以，二级要和一级的关系屡好，如何将鼠标在不出一级菜单的情况就能到二级菜单上，建议你使用js写这个效果。你是指出现这个问题还是想 实现这个效果？移动端的触摸事件有：
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
之类的 可以去w3c查一查
