• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

纯CSS下拉展示（下拉菜单）_CSS学习

当前位置：网站建设 > 技术支持

相关：《jQuery 鼠标触发下拉菜单》

昨天写了一个新的CSS，如图所示，使用纯CSS实现，我个人不是很擅长JS，所以纯CSS也是不得已。

HTML代码：

<span class="cai">商品互踩群

      <div class="qun">

       <ul>

        <li>群1：2851618834<i>(满)</i></li>

        <li>群1：2851618834</li>

        <li>群1：2851618834</li>

       </ul>

      </div>

     </span>

CSS：

.topr .cai{display:inline-block;

 padding-left: 4px; padding-right: 4px;

 line-height: 30px;

 height: 30px;

 border-left: 1px solid #ededed; border-right: 1px solid #ededed;border-bottom: 1px solid #FFF;/*默认下白边*/

 position: relative;

 margin-bottom: -1px;

 background-color: #FFF;/*默认开启背景色*/

}

.topr .cai .qun{display: block; /*默认下拉*/

 position: absolute;

 right: -1px;

 width: 160px;

 border: 1px solid #ededed;

 background-color: #FFF;

 z-index: -1;

 height: 80px;

}

.qun ul{list-style: none;position: absolute; top: 8px; left: 6px;}

.qun ul li{line-height: 22px; background: url(../images/qq.png) no-repeat left; text-align: left; padding-left: 22px;}

.qun ul li i{ color: #e53433;font-style:normal;}

.topr .cai:hover{background-color: #FFF;height: 69px;border-left: 1px solid #ededed; border-right: 1px solid #ededed; border-bottom: 1px solid #FFF;}

.topr .cai:hover .qun{display: block;}/*鼠标触发下拉*/

以上CSS为下拉区域使用了display: block;固定显示了，没有进行隐藏，所以默认为下拉状态显示。

提醒：使用z-index: -1;时请注意，一不小心就无法点击下拉区域了。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。