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

来源：互联网发布：星网锐捷和锐捷网络编辑：程序博客网时间：2024/05/22 15:40

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

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 要设置为“绝对路径”。

0 0