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 要設定為“絕對路徑”。