CODEWITHSUNDEEP
htmlcss
Amine Zel
Amine Zel

Reputation: 409

Drop-Down menu disappears quickly

The dropdown submenu(kpi) here is disappearing whenever I hover the mouse over it.

I have seen and tried the various solution already mentioned in the forum but none seem to help correct it. Please help, I want to solve this.

thank-you 

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

Upvotes: 1

Views: 1331

Answers (2)

DanielaB67
DanielaB67

Reputation: 442

Add this to your CSS:

.nav:hover {
    display: block;
}

Check it in codepen and it's working fine. I looked for a "hover" problem in CSS and I found that ":hover" for "nav" is missing.

Upvotes: 1

Robert Negreanu
Robert Negreanu

Reputation: 171

Try to add a different class to submenu .sub3 and some additional css and play around this.

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>

Upvotes: 1

Related Questions