编写一个简单的css二级菜单，鼠标移动二级菜单就消失的问题

来源：互联网发布：淘宝定金和尾款怎么算编辑：程序博客网时间：2024/04/27 14:14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二级列表学习</title><style type="text/css">body {font-family: Verdana;font-size: 12px;line-height: 1.5;}img {border-style: none;}a {color: #000;text-decoration: none;}a:hover {color: #F00;}#menu {width: 150px;border:1px solid #CCC;border-bottom:none;}#menu ul {list-style: none;margin: 0px;padding: 0px;}#menu ul li {background: #EEE;/*注意这里!!!!*/padding: 0px 8px;height: 26px;line-height: 26px;border-bottom: 1px solid #CCC;position:relative;}#menu ul li ul {display: none;position: absolute;left: 150px;top: -1px;background: #EEE;border: 1px solid #CCC;border-bottom:none;width: 150px;}#menu ul li:hover ul {display:block;}</style></head><body><div id="menu"> <ul> <li><a href="javascript:void(0);">咕咕</a> <ul> <li>XXX</li> <li>YYY</li> </ul> </li> <li><a href="javascript:void(0);">df</a> <ul> <li>111</li> <li>222</li> </ul> </li> <li><a href="javascript:void(0);">dfdafa</a></li> </ul></div></body></html>

如果将：background: #EEE;写到#menu ul 里而不写到#menu ul li 里面，则会出现鼠标移出超链接后但没有移出li而二级菜单就消失的问题。问题是发现了，但是不明白是为什么。