大家做下拉菜单时有没有这个问题。

Question

今天有一个项目要做下拉菜单，是要悬停上去然后出现下拉菜单，然后我的下拉菜单部分如下 <div class="dropdown">            <ul>            <li>            <a href="##"><span>小</span>小学</a>            <div class="dropdownmenu1">            <ul>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a>3</li>            <li><a href="#">123123</a></li>            </ul>            </div>            </li>            <li>            <a href="##"><span>初</span>初中</a>            <div class="dropdownmenu1">            <ul>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            </ul>            </div>            </li>            <li>            <a href="##"><span>高</span>高中</a>            <div class="dropdownmenu1">            <ul>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            </ul>            </div>            </li>            <li>            <a href="##"><span>升</span>升学考</a>            <div class="dropdownmenu1">            <ul>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            </ul>            </div>            </li>            <li>            <a href="##"><span>优</span>优等生</a>            <div class="dropdownmenu1">            <ul>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            <li><a href="#">123123</a></li>            </ul>            </div>            </li>            </ul>        </div>然后我绑定了一个mouseover事件到li上，li里有一个a标签，然后现在就是我悬停过去的时候，如果鼠标移到li里a标签的内容上，就会触发mouseout事件，然后下拉菜单就会收回，然后再次出现，再收回。。我现在弄懂了是因为移到a上，浏览器会认为你移出li了。然后由于事件冒泡，下拉菜单收回后又回再出现，但是我现在就是想不通这种情况怎么办。求各位大神给个解决方法啊

Answer 1

直接使用js的话，我一般会不用a标签，而是直接为li绑上onclick。

如果非要说html/css的话我可能会在a标签里再加个span标签之类的，然后把mouseover绑到这个span上。

我也初学哈，重在交流

Answer 2

你可以绑定到A标签上，A标签充满整个LI就行了。

Answer 3

既然知道了是冒泡的原因，那就好办了。。不过这个感觉只用css简单一些

http://www.imooc.com/learn/138