时间戳

首页 > 解决方案 > 我的博客下拉子菜单在悬停时消失

drop-down-menu - 我的博客下拉子菜单在悬停时消失

问题描述

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



    #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；
    }
    }

标签： drop-down-menuhoverblogger

解决方案

.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;
        }

或更改为显示：块；

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

试试看..

推荐阅读