我想我的问题以前已经回答过很多次了,但我找不到我的确切情况。
我有一个带有子菜单的垂直菜单,我只想在单击父级(而不是悬停)时显示子菜单,一次只显示一个子菜单,在单击菜单外的某个位置后,我希望子菜单消失。
这就是我现在所拥有的——它基于现在的悬停。我尝试将 a:hover 更改为 a:active 之类的东西,但效果不佳(我的 CSS 不太好)。
/* 容器 */ #cssmenu > ul { 显示:块; 位置:相对; //宽度:190px; 宽度:100%; } /* 包含链接的列表元素 */ #cssmenu > ul li { 显示:块; 位置:相对; 边距:0; 填充:0; 宽度:100%; } /* 通用链接样式 */ #cssmenu > ul li a { 显示:块; 位置:相对; 边距:2; 宽度:95%; 高度:50 像素; 背景颜色:#ABC578; 左边框:实心 0px #FFFFFF; 边框底部:实心 1px #FFFFFF; 字体:0.7em Tahoma,无衬线; 字体大小:14px; 字体粗细:粗体; 颜色:#FFFFFF; 文字装饰:无; 填充顶部:30px; } /* 菜单/子菜单链接的悬停状态 */ #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a { 颜色:#fff; 文本阴影:0 1px 0 rgba(0, 0, 0, .3); 背景:#82c500; 背景:-webkit-linear-gradient(底部,#82c500,#000000); 背景:-ms-linear-gradient(底部,#82c500,#000000); 背景:-moz-linear-gradient(底部,#82c500,#000000); 背景:-o-线性渐变(底部,#82c500,#000000); 边框颜色:透明; } /* 指示子菜单的箭头 */ #cssmenu > ul .has-sub>a::after { 内容: ''; 位置:绝对; 顶部:34px; 右:8px; 宽度:0px; 高度:0px; /* 使用边框创建箭头 */ 边框:4px纯透明; 左边框:4px 实心#d8d8d8; } /* 相同的箭头,但颜色更深,以创建阴影效果 */ #cssmenu > ul .has-sub>a::before { 内容: ''; 位置:绝对; 顶部:35px; 右:8px; 宽度:0px; 高度:0px; /* 使用边框创建箭头 */ 边框:4px纯透明; 左边框:4px 实心#000; } /* 改变鼠标悬停时的颜色 */ #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after { 左边框:4px 实心#fff; } #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before { 左边框:4px 实心 rgba(0, 0, 0, .3); } /* 子菜单 */ #cssmenu > ul ul { 位置:绝对; 左:95%; 宽度:100%; 顶部:-9999 像素; 左填充:5px; 不透明度:0; /* 使用不透明过渡创建的淡入淡出效果 */ -webkit-transition:不透明度 .2s 缓入; -moz-transition:不透明度 .2s 缓入; -o-transition:不透明度 .2s 缓入; -ms-transition:不透明度 .2s 缓入; } /* 当用户悬停父链接时显示子菜单 */ #cssmenu > ul li:hover>ul { 顶部:-2px; 不透明度:1; }
请问有人有什么想法吗?