为什么我hover之后dl直接悬浮在下一个li上？

*{margin:0;padding:0;}

.list{width:auto;height:300px;border:1px solid #ccc;margin:0 auto;padding-top: 100px;}

h3{height:24px;background: #ccc;line-height: 24px;font-size: 14px;padding-left: 10px;}

ul li{list-style: none;border-bottom: 1px dotted #ccc;height: 24px;line-height: 24px;color: #333;font-size: 12px;padding-left: 10;}

ul li img{height: 24px;width: 24px;}

ul li:hover dl{display: block;}

ul li dl{padding-left: 20px;display: none;}