html二级菜单显示与隐藏,悬浮显示隐藏二级菜单与小三角制作

雨点打透心脏的1/2处 2022-10-06 01:51 24阅读 0赞

Document

.pop-menu-inner \{ width: 150px; \}

.pop-menu-inner .pop-title \{ width: 150px; text-align: center; color: \#212121; font-size: 18px; cursor: pointer;\}

.pop-menu-inner:hover .pop-menu \{ display: block; \}

.pop-menu-inner .pop-menu \{ display: none; position: relative; width: 150px;border: 1px solid \#E5E5E5; margin: 0; padding: 10px 0px; background-color: \#fff; border-radius: 2px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.15); box-shadow: 0 5px 10px rgba(0,0,0,0.15); \}

/\*两个小三角(一个背景色是边框的背景色，一个是\#fff)\*/

.pop-menu-inner .pop-menu:before \{ display: block;content: "◆";font-size: 14px;position: absolute;left: 72px;top: -11px;color: \#E5E5E5; \}

.pop-menu-inner .pop-menu:after \{ display: block;content: "◆";font-size: 14px;position: absolute;left: 72px;top: -10px;color: \#fff; \}

.pop-menu-inner .pop-menu li \{ display: block; padding: 0px !important; \}

.pop-menu-inner .pop-menu li a \{ display: block;font-size: 16px;color: \#434343;text-align: center;height: 40px;line-height: 40px; text-decoration: none; \}

.pop-menu-inner .pop-menu li:hover a \{ color:\#E84519; background-color: \#F3F3F3; \}

理财

*  定期活期
 *  基金投资

\`\`\`html

结果：

!\[输入图片说明\](https://static.oschina.net/uploads/img/201803/03163115\_1miE.gif "在这里输入图片标题")

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 html、css 实现二级菜单

本文中，一级菜单我设计了五个元素（然后给第四个元素设计了二级菜单） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

不念不忘少年蓝@/ 2023年06月21日 04:54/ 0 赞/ 23 阅读

相关 HTML/CSS 二级菜单

HTML/CSS 二级菜单代码： <!DOCTYPE html> <html lang="en"> <head> <m

矫情吗；*/ 2023年01月01日 14:57/ 0 赞/ 121 阅读

相关 html二级菜单显示与隐藏,悬浮显示隐藏二级菜单与小三角制作

Document .pop-menu-inner \{ width: 150px; \} .pop-menu-inner .pop-title \{ width: 150p

雨点打透心脏的1/2处/ 2022年10月06日 01:51/ 0 赞/ 25 阅读

相关 jquerty鼠标移上显示隐藏菜单简洁下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

快来打我*/ 2022年09月26日 12:57/ 0 赞/ 236 阅读

相关隐藏菜单显示

![请添加图片描述][cd91319d26304196a55a51ee69dbe57c.gif] <!DOCTYPE html> <html lang="en

谁借莪１个温暖的怀抱￠/ 2022年09月01日 13:59/ 0 赞/ 249 阅读

相关 jquery - 左边栏菜单滑动隐藏/显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰半橙微兮°/ 2022年08月10日 12:57/ 0 赞/ 314 阅读

相关显示与隐藏

[vueJS简单的点击显示与隐藏的效果][vueJS] 目前前端框架太多，接触过angular、ember，现在开始倒腾vue 此处用到v-if、v-else、v-sh

淩亂°似流年/ 2022年06月04日 08:07/ 0 赞/ 317 阅读

相关小程序展开二级菜单

效果图: ![70][] 直接上代码: WXML: <view class='dataCent'> <view class='Men

柔光的暖阳◎/ 2022年05月09日 23:16/ 0 赞/ 232 阅读

相关 Android菜单选项及导航栏显示隐藏

首先来设置菜单选项：我们用两种方式来设置 1.只需要在MainActivity.java下用代码控制即可先创立两个方法onCreateOptionsMenu(Menu m

偏执的太偏执、/ 2022年04月24日 01:58/ 0 赞/ 568 阅读

相关 div 显示与隐藏

最近写项目用到DIV隐藏,以下引用[http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html][http_ww

我不是女神ヾ/ 2021年12月17日 15:45/ 0 赞/ 465 阅读