下拉菜单快速消失

时间：2017-06-18 17:40:07

标签： html css

每当我将鼠标悬停在它上面时，下拉子菜单（kpi）就会消失。

我已经看过并试过了论坛中已经提到的各种解决方案，但似乎没有任何帮助纠正它。请帮忙，我想解决这个问题。

感谢您

＆＃13;
＆＃13; 
p, ul, li, div { padding:0; margin:0; } 

/*Menu*/
body{
font-family:sans-serif;
}
#menu{
    height: 800px !important; 
}
#menu{
    overflow: auto;
    position:relative;
    z-index:999;
}
.parent-menu{
    background-color: darkgray;
    min-width: 100px;
    float: left;
}
#menu ul{
    list-style-type: none;
}
#menu ul li a {
    padding: 30px 30px;
    display:block;
    color:black;
    text-decoration: none;
}
#menu ul li a:hover{
    background-color:chocolate;
}
/*SubMenu*/

#menu ul li:hover > ul{
    left: 105px;shape-image-threshold: 
    -webkit-transition: left 100ms ease-in;
    -moz-transition: left 100ms ease-in;
    -ms-transition: left 100ms ease-in;
    transition: left 100ms ease-in;
}
/*bloc confli*/
.nav {
    display: none;
}
.container a:hover + nav {
    display: block !important;
    
}

.nav {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}


#menu ul li > ul { 
    position: absolute; 
    background-color: beige; 
    top: 0; 
    left: -250px;
    min-width: 200px; 
    z-index: -1; 
    height: auto; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
    
} 

#menu  ul li > ul li a:hover {
    background-color:azure; 
    height: auto;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PREMIERS PAS AVEC BRACKETS</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="QuickSP.css">
</head>
    <body>
        <nav id="menu">
            <ul class="parent-menu">
                <li><a href="#">Topic1</a>
                    <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                    </ul>
                </li>
                <li><a href="#">Topic2</a>
                    <ul class="container">
                        <li><a href="#">SupTopic1</a>
                        <nav class="nav">
                            <ul>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                            </ul>
                        </nav>
                        </li>
                        <li><a href="#">SupTopic2</a></li>
                        <li><a href="#">SupTopic3</a></li>
                        <li><a href="#">SupTopic4</a></li>
                    </ul>
                </li>
                <li><a href="#">Topic3</a>
                    <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                    </ul>
                </li>
                <li><a href="#">Topic4</a>
                    <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
    
<html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

尝试将不同的类添加到子菜单.sub3和一些额外的css并玩弄它。

ul.container.sub3 {
       z-index: 1000 !important;
    }
ul.container:hover ul.container.sub3 {
   left: 200px !important;
}


p, ul, li, div { padding:0; margin:0; } 

/*Menu*/
body{
font-family:sans-serif;
}
#menu{
    height: 800px !important; 
}
#menu{
    overflow: auto;
    position:relative;
    z-index:999;
}
.parent-menu{
    background-color: darkgray;
    min-width: 100px;
    float: left;
}
#menu ul{
    list-style-type: none;
}
#menu ul li a {
    padding: 30px 30px;
    display:block;
    color:black;
    text-decoration: none;
}
#menu ul li a:hover{
    background-color:chocolate;
}
/*SubMenu*/

#menu ul li:hover > ul{
    left: 105px;shape-image-threshold: 
    -webkit-transition: left 100ms ease-in;
    -moz-transition: left 100ms ease-in;
    -ms-transition: left 100ms ease-in;
    transition: left 100ms ease-in;
}
/*bloc confli*/
.nav {
    display: none;
}
.container a:hover + nav {
    display: block !important;
    
}

.nav {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}


#menu ul li > ul { 
    position: absolute; 
    background-color: beige; 
    top: 0; 
    left: -250px;
    min-width: 200px; 
    z-index: -1; 
    height: auto; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
    
} 

#menu  ul li > ul li a:hover {
    background-color:azure; 
    height: auto;
}
ul.container.sub3 {
  z-index: 1000 !important;
}
ul.container:hover ul.container.sub3{
   left: 200px !important;
}
        <nav id="menu">
            <ul class="parent-menu">
                <li><a href="#">Topic1</a>
                    <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                    </ul>
                </li>
                <li><a href="#">Topic2</a>
                    <ul class="container">
                        <li><a href="#">SupTopic1</a>
                            <ul class="container sub3">
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                                <li>
                                    <a href="#">KPI</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">SupTopic2</a></li>
                        <li><a href="#">SupTopic3</a></li>
                        <li><a href="#">SupTopic4</a></li>
                    </ul>
                </li>
                <li><a href="#">Topic3</a>
              <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
             </ul>
                </li>
                <li><a href="#">Topic4</a>
                    <ul>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                        <li><a href="#">SupTopic</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    
<html>

答案 1 :(得分：1)

将此添加到您的CSS：

.nav:hover {
    display: block;
}

在codepen中查看它，它运行正常。我在CSS中找了一个“悬停”问题，我发现“导航”的“悬停”丢失了。

相关问题
最新问题