我的博客下拉子菜单在悬停时消失

Posted 2023-03-06

【中文标题】我的博客下拉子菜单在悬停时消失

【英文标题】：My blogger dropdown sub menu disappears on hover

【发布时间】：2021-02-05 19:22:18

【问题描述】：

我只是从教程中复制了这段代码，但我尝试打开子菜单它消失了。我不知道该怎么办请帮助我。

#nav_wrapper1 宽度：100%； .nav_wrapper 边框底部：1px 纯白色； 左：0； 顶部：0； 位置：顶部； 宽度：100%； 过渡：前 0.5 秒缓出； 背景：#170030； 高度：60px； z指数：99999； .btn 内边距：10px 1%； 边距：5px； 颜色：#fff; 文字装饰：无； 字体系列：正常； 过渡：所有 0.1s 缓和； .btn:悬停 过渡：所有 0.1s 缓和； #搜索我颜色：#fff; 字体大小：22px; ＃搜索 浮动：对； 字体大小：22px； 填充：20px 25px； 行高：0px； 颜色：#fff; 边距：0； 字体粗细：700； -webkit-transform：旋转（90度）； -moz 变换：旋转（90 度）； -ms 变换：旋转（90 度）； -o-变换：旋转（90度）； 变换：旋转（90度）； #搜索：悬停 背景：#111； 。搜索框 明确：两者； 宽度：40%； 背景：#111； 填充：0； 边距：0； 高度：0； 溢出：隐藏； 过渡：所有 0.1 秒缓入出； 浮动：对； z指数：99999999999； .search_box.active 高度：自动； 填充：10px 0； 宽度：40%； .search_box 输入 宽度：60%； 字体大小：13px； 边距：0 0 0 10px； 填充：10px； 边框：无； 背景：#fff; .search_box 输入：焦点 大纲：无； .search_box 输入.search_icon 明确：两者； 宽度：30%； 高度：自动； 填充：10px； 边距：0； 边距右：10px； 边框：无； 颜色：#fff; 光标：指针； 背景：#6a00de； 不透明度：1； 过渡：所有 0.1s 缓和； 浮动：对； .search_box input.search_icon:hover 背景：#FFF； 颜色：#111; .菜单链接 显示：无； .spinner-master 输入[type=checkbox] 显示：无； 。菜单 宽度：100%； 高度：自动； 背景：#170030； 颜色：#170030; 过渡：所有0.3s缓和； 边距顶部：5px； .menu ul 填充：0px； 边距：0px； 列表样式：无； 位置：相对； 显示：内联块； .menu > li > ul.sub_menu 最小宽度：10em； 填充：4px 0； 背景颜色：#111； 边框：1px 实心#fff； .menu ul li 填充：0px； .menu > ul > li 显示：内联块； .menu ul li a 显示：块； 文字装饰：无； 颜色：#fff; 字体大小：18px； 高度：100%； .menu ul li a:hover 背景：#111； 颜色：#fff; .menu ul li.hover > a 背景：#111； 颜色：#FFF； .menu ul li > a 填充：15px； .menu ul ul 显示：无； 位置：绝对； 最高：100%； 最小宽度：160px； 背景：#111； .menu ul li:hover > ul 显示：块； .menu ul ul > li 位置：相对； .menu ul ul > li a 填充：10px 15px； 高度：自动； 背景：#000000； .menu ul ul > li a:hover 背景：#111； 颜色：#fff; .menu ul ul ul 位置：绝对； 左：100%； 顶部：0； @media all and (max-width: 860px) .example-header .container 宽度：100%； ＃搜索 颜色：#fff; 填充：0px 20px 0px 5px； 边距顶部：25px； .spinner-master * 过渡：全0.3s； box-sizing：边框框； .spinner-master 位置：相对； 边距：15px； 高度：30px； 宽度：30px； 向左飘浮; .spinner-master 标签 光标：指针； 位置：绝对； z指数：99； 高度：100%； 宽度：100%； 顶部：5px； 左：0； .spinner-master .spinner 位置：绝对； 高度：4px； 宽度：100%； 填充：0； 背景颜色：#fff； .spinner-master .diagonal.part-1 位置：相对； 向左飘浮; .spinner-master .horizo​​ntal 位置：相对； 向左飘浮; 边距顶部：4px； .spinner-master .diagonal.part-2 位置：相对； 向左飘浮; 边距顶部：4px； .spinner-master 输入[type=checkbox]:checked ~ .spinner-spin > .horizo​​ntal 不透明度：0； .spinner-master 输入[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 变换：旋转（135度）； -webkit 变换：旋转（135 度）； 边距顶部：10px； .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 变换：旋转（-135度）； -webkit-transform: 旋转(-135deg); 边距顶部：-12px； a.菜单链接 显示：块； 颜色：#fff; 向左飘浮; 文字装饰：无； 填充：10px 16px； 字体大小：1.5em； a.菜单链接：悬停 颜色：#efa666； a.menu-link：在之后 内容：“2630”； 字体粗细：正常； a.menu-link.active:在之后 内容：“2715”； 。菜单 明确：两者； 最小宽度：继承； 浮动：无； 顶部：0px； 位置：相对； .menu, .menu > ul ul 溢出：隐藏； 最大高度：0； 背景颜色：#39484d； .menu > li > ul.sub-menu 填充：0px； 边框：无 .menu.active, .menu > ul ul.active 最大高度：55em； .menu ul 显示：内联； .menu li, .menu > ul > li 显示：块； .menu > ul > li:last-of-type a 边框：无； .menu里一个 颜色：#fff; 显示：块； 填充：0.8em； 位置：相对； .menu li.has-submenu > a:after ` 内容：‘+’； 位置：绝对； 顶部：0； 右：0； 显示：块； 字体大小：1.5em； 填充：0.55em 0.5em； .menu li.has-submenu > a.active:after 内容： ”-”; .menu ul ul > li a 背景：#170030; 填充：10px 18px 10px 30px； 边框底部：1px 实心#111； .menu ul li a:hover 背景：#4b5f65； 颜色：#fff; .menu ul li.hover > a 背景：#111； 颜色：#fff; .menu ul ul，.menu ul ul ul 显示：继承； 位置：相对； 左：自动； 顶部：自动； 边框：无； .search_box.active 位置：绝对； 顶部：63px； z 指数：10； 宽度：70%； 右：2px； .search_box 输入 宽度：50%； 向左飘浮; .search_box 输入.search_icon 宽度：30%； 浮动：对； 边距右：14px； 边距顶部：-37px；

【参考方案1】：

.menu ul ul 
    display: none;
    position: absolute;
    top: 100%;
    min-width: 160px;
    background: #111;
    

删除显示：无

.menu ul ul 
      
        position: absolute;
        top: 100%;
        min-width: 160px;
        background: #111;
        

或改为display:block;

.menu ul ul 
        display:block;
        position: absolute;
        top: 100%;
        min-width: 160px;
        background: #111;
        

试试吧..