需求:鼠标滑过菜单项,显示下拉菜单。如图:
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>
#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 要设置为“绝对路径”。