1、<!DOCTYPE html><html><head> <稆糨孝汶;meta charset="UTF-8"> <title>Document</title></head><style type="text/css">ul { float: left;}ul li { list-style: none; margin: 7px 20px 6px 0; float: left; position: relative; cursor: pointer; background: $fff; z-index: 9;}ul li span{ height: 20px; padding: 0 5px; line-height: 20px; display:inline-block; background:#fff; border: #555 1px solid;}ul li:hover .sub-ul { display: block;}ul li .sub-ul { position: absolute; width: 180px; left: 0px; border: red 1px solid; background: #fff; display: none; z-index: 999; top:10px;}ul li .sub-ul li { border: none; height: 23px; margin: 0px; line-height: 23px; float: left;}</style><body> <ul> <li><span>手机</span> <ul class="sub-ul cl"> <li>智能机</li> <li>功能机</li> <li>对讲机</li> </ul> </li> </ul></body></html>
2、上例中，子元素覆盖在了父元素上面