css+jquery鼠标滑过，显示下拉菜单效果

需求：鼠标滑过菜单项，显示下拉菜单。如图：

html代码解析：因为下拉菜单为列表，所以需要使用 <ul>标签

<div id="img_mess">
    <ul>
        <li class="dropdown">
          <a href="#"><img src="img/消息-有.png"/></a>
          <ul>
            <li><a href="#"> 待办件 <span>1条</span> </a></li>
            <li><a href="#"> 协办件 <span>4条</span> </a></li>
            <li><a href="#"> 督办件 <span>3条</span> </a></li>
          </ul>
        </li>
    </ul>
</div>

CSS解析：

#img_mess {	/* 铃铛div */
  width:90px;
  height:22px;
  margin-top:12px;
  border-left:1px solid rgb(0,0,0);
  float:right;
}

	.dropdown {  /* 最外层 li */
		width:90px;;
		position: relative;
	}
	
	.dropdown ul {	/* 隐藏下拉菜单 */
		display: none;
		position: absolute;
		
	}
	
	.dropdown:hover ul {  /* 下拉菜单样式 */
		display: block;
		min-width: 140px;
		background: #fff;
		border-top: 0;
		border-radius: 0 0 3px 3px;
		-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
	}
	
	
#img_mess > ul >.dropdown > a > img{ /*  铃铛图片偏移量 */
	margin-left:35px;
}
#img_mess > ul >.dropdown > ul > li{  /* 下拉菜单行高 */
	padding:5px 12px;
	display:block;
	line-height:18px;
	color:#000;
	font-size:14px;
	border-bottom:1px solid #ccc;
}

#img_mess > ul >.dropdown > ul > li > a{
	text-decoration: none;
}

#img_mess > ul >.dropdown > ul > li > a:hover {
	text-decoration: none;
	color:#fff;
}
#img_mess > ul >.dropdown > ul > li:hover{
	background:rgb(85,223,255);
    color:#fff;
}


.dropdown > ul >li > a > span{  /* 待办项数字位置 */
	float:right;
	margin-left:-4px;
}

注意：上面 .dropdown 要设置为“”相对路径”，而 .dropdown  ul 要设置为“绝对路径”。