CODEWITHSUNDEEP
htmlcss
MarksASP
MarksASP

Reputation: 506

Dropdown menu disappears when I try to hover it

I'm trying build a dropdown menu con HTML and CSS, but the problem is that when I hover on the menu item that contains the sub-menu, this one appears, but when I try to hover it, it disappears.

Here's the code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
}
header {
  height: 120px;
  background: #353638;
  width: 100%;
  z-index: 1;
}
#c-header {
  width: 60%;
  margin: 0 auto;
  height: 100%;
}
#logo {
  float: left;
  width: 76px;
  height: 35px;
  margin: 40px;
}
#logo img {
  display: block;
  height: 100%;
  width: 100%;
}
nav {
  float: right;
  margin: 15px;
  line-height: 70px;
}
.nav-item {
  list-style-type: none;
  float: left;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  height: 90px;
  display: block;
  position: relative;
  z-index: 1;
}
.nav-item > a {
  text-decoration: none;
  color: white;
  display: block;
  height: 100%;
  line-height: 90px;
  padding: 0 15px 0 15px;
  transition: background .5s ease;
}
.nav-item a:hover {
  background: #337ab7;
}
.nav-item .sub-menu {
  background: #337ab7;
  position: absolute;
  width: 250px;
  display: none;
  z-index: 9999;
}
.sub-menu ul {
  overflow: hidden;
  list-style-type: none;
  padding: 10px;
}
.sub-menu-item {
  height: 40px;
}
.sub-menu-item a {
  text-decoration: none;
  color: white;
  display: block;
  line-height: 32px;
  padding: 4px 0 4px 20px;
  transition: background .3s ease;
}
.sub-menu-item a:hover {
  background: #333;
}
.nav-item a:hover ~ .sub-menu {
  display: block;
  z-index: 9999;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sima</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
  <script src="js/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>

  <header>
    <div id="c-header">
      <a href="#" id="logo">
        <img src="img/logo.png" alt="sima_logo">
      </a>
      <nav id="menu">
        <ul>
          <li class="nav-item">
            <a href="#">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" id="oap">Our Another Page
                <i class="fa fa-angle-down" aria-hidden="true"></i>
              </a>

            <div class="sub-menu">

              <ul id="oap-sub-menu">
                <li class="sub-menu-item"><a href="#">Our Team</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Testimonial</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Latest Blog</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Pricing</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Happy Client</a>
                </li>
              </ul>

            </div>



          </li>
          <li class="nav-item">
            <a href="#" id="sp">Stick Page
                <i class="fa fa-angle-down"></i>

              </a>

            <div class="sub-menu">

              <ul id="sp-sub-menu">
                <li class="sub-menu-item"><a href="#">Blog Page</a>
                </li>
                <li class="sub-menu-item"><a href="#">Single Blog Page</a>
                </li>
              </ul>

            </div>



          </li>
          <li class="nav-item">
            <a href="#">About</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Skill</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Service</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Portfolio</a>
          </li>
          <li class="nav-item">
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <script src="js/script.js"></script>
</body>

</html>

Upvotes: 1

Views: 7440

Answers (4)

Kuldeep
Kuldeep

Reputation: 11

https://codepen.io/Kuldeep_2110/pen/MWvpZoR?editors=1100

Note : Made with bootstrap classes

#header{
    position: fixed;
    z-index: 10;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.15) ;
    box-shadow: 0 0 0 rgb(0 0 0 / 10%);
}
h1,h2,h3,h4,h5,h6{
    font-weight: 600;
    line-height: 1.5;
    font-family: Poppins,sans-serif;
}
a{
    text-decoration: none;   
}
.navbar{
    padding: 0;
}
header .container-fluid{
    padding: 0 30px;
}
.main-nav .nav-link{
    display: block;
    line-height: 22px;
    padding: 14px 5px;
    color: #666;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Poppins,sans-serif;
}
.navbar-brand{
    padding: 0 30px 0 0;
}
.nav-item{
    position: relative;
}
.main-nav .nav-item .nav-link:hover{
    color: #1abc9c;
}
.dropdown-1, .dropdown-2{
    display: block;
    opacity: 0;
    margin-top: 15px;
    z-index: -9999;
    pointer-events: none;
    border-top: 2px solid #1abc9c !important;
    width: 240px;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 13px 42px 11px rgb(0 0 0 / 5%);
    border: 1px solid #eee;
    z-index: -99;
    top: 100%;
    left: 0;
    padding: 10px;
    visibility: hidden;
}
.megamenu{
    left: 240px;
}
.dropdown-1 .nav-item, .dropdown-2 .nav-item{ 
    display: none;
    visibility: hidden;
}
.nav-link div>.bi{
    float: right;
}
.nav-link div span .bi{
    padding-right: 10px;
}
.dropdown-1 .nav-item .nav-link, .dropdown-2 .nav-item .nav-link{
    padding: 10px 15px;
    font-weight: 700;
    border: 0;
    transition: all .2s ease-in-out;
    position: relative;
    display: block;
    line-height: 22px;
    font-size: 12px;
    color: #666;
    letter-spacing: 0;
    font-family: Lato,sans-serif;
}
.nav-item:hover>.dropdown-1, .nav-item:hover>.dropdown-2{
    opacity: 1;
    margin-top: 0;
    z-index: 399;
    visibility: visible;
    pointer-events: all;
    transition: opacity .2s ease,margin .4s ease;
}
.nav-item:hover > .nav-link{
    color: #1abc9c;
}
.nav-item:hover>.dropdown-1 .nav-item, .nav-item:hover>.dropdown-2 .nav-item{
    display: block;
    visibility: visible;
}
.dropdown-1 .nav-item .nav-link:hover{
    transform: translateX(5px);
    background-color: #f7f7f7;
}
.megamenu ul .nav-item{
    display: inline-block;
}
.search{
    flex-direction: row;
}
.search .nav-link{
    margin: 0 8px;
    position: relative;
    font-size: 18px;
    display: inline-block;
}
.span{
    display: block;
    position: absolute;
    top: 3px;
    right: -1px;
    font-size: 10px;
    color: #fff;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1abc9c;
    opacity: 0.8;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<header>
      <nav id="header" class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid justify-content-end">
          <a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav main-nav">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#"><div>Home</div></a>
                <ul class="dropdown-1">
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Niche Demos</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Block</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>One-Page Demos</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Corporate</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="">
                      <div>Home - Portfolio <i class="bi bi-chevron-right"></i></div>                      
                    </a>
                      <ul class="dropdown-2">
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Portfolio - Layout 1</div></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Portfolio - Layout 2</div></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Portfolio - Layout 3</div></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Portfolio - Layout 4</div></a>
                        </li>
                      </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Blog <i class="bi bi-chevron-right"></i></div></a>
                    <ul class="dropdown-2">
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Blog - Layout 1</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Blog - Layout 2</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Blog - Layout 3</div></a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Shop <i class="bi bi-chevron-right"></i></div></a>
                    <ul class="dropdown-2">
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Shop - Layout 1</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Shop - Layout 2</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Shop - Layout 3</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Shop - Layout 4</div></a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Magizine <i class="bi bi-chevron-right"></i></div></a>
                    <ul class="dropdown-2">
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Magazine - Layout 1</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Magazine - Layout 2</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Magazine - Layout 3</div></a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Landing page <i class="bi bi-chevron-right"></i></div></a>
                    <ul class="dropdown-2">
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Landing Page - Layout 1</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Landing Page - Layout 2</div></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href=""><div>Landing Page - Layout 3</div></a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Fullscreen <i class="bi bi-chevron-right"></i></div></a>
                      <ul class="dropdown-2">
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Fullscreen - Layout 1</div></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href=""><div>Fullscreen - Layout 2</div></a>
                        </li>
                      </ul>                      
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href=""><div>Home - Onepage <i class="bi bi-chevron-right"></i></div></a>
                        <ul class="dropdown-2">
                          <li class="nav-item">
                            <a class="nav-link" href=""><div>Onepage default</div></a>
                          </li>
                        </ul>                      
                        <ul class="dropdown-2 megamenu">
                          <li class="nav-item">
                            <a class="nav-link" href=""><div>Onepage Submenu</div></a>
                          </li>
                        </ul>                                            
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Features</div></a>
                <ul class="dropdown-1">
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-files"></i></span>Slider<i class="bi bi-chevron-right"></i></div></a>
                    <ul class="dropdown-2">
                      <li class="nav-item">
                        <a class="nav-link" href="">
                          <div>Revolution Slider<i class="bi bi-chevron-right"></i></div>
                        </a>
                        <ul class="dropdown-2">
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Premium Templates
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Full Screen
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Full Width
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Kenburns Effect
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              HTML 5 Video
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="">
                          <div>Canvas Slider<i class="bi bi-chevron-right"></i></div>
                        </a>
                        <ul class="dropdown-2">
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Full Width
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Fade Transition
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Autoplay Feature
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Custom Video Event
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Pagination Navigation
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Columns
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="">
                          <div>Flex Slider<i class="bi bi-chevron-right"></i></div>
                        </a>
                        <ul class="dropdown-2">
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              Default Layout
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="" class="nav-link">
                              With Thumbs
                            </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-umbrella"></i></span>Headers<i class="bi bi-chevron-right"></i></div></a>
                      <ul class="dropdown-2">
                        <li class="nav-item">
                          <a href="" class="nav-link">
                            Default Layout
                          </a>
                        </li>
                        <li class="nav-item">
                          <a href="" class="nav-link">
                            With Thumbs
                          </a>
                        </li>
                      </ul>                    
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-list"></i></span>Menu Styles<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-layout-split"></i></span>Mega Menu<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-receipt"></i></span>Forms</div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-gift"></i></span>Widgets<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-check-circle-fill"></i></span>Page Title<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-layout-text-window-reverse"></i></span>Side Panels<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-fullscreen"></i></span>Modal Onland<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link"><div><span><i class="bi bi-grid-3x3-gap-fill"></i></span>Footers<i class="bi bi-chevron-right"></i></div></a>
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Pages</div></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Portfolio</div></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Blog</div></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Shop</div></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><div>Shortcodes</div></a>
              </li>
            </ul>
            <ul class="navbar-nav search">
              <li class="nav-item"><a class="nav-link" href=""><i class="bi bi-search"></i></a></li>
              <li class="nav-item"><a class="nav-link" href=""><i class="bi bi-bag-fill"></i><span class="span">5</span></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

Upvotes: 1

Kuldeep
Kuldeep

Reputation: 11

Here is an example Mega Menu (you can edit it accordingly); hover on the "Home" button in navbar to see hover effect.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a{
    display: block;
    text-decoration: none;
}
header{
    width: 100%;
    background: brown;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 100px;
}
.logo{
    width: 150px;
}
.logo img{
    width: 100%;
    height: 80px;
}
.navbar ul{
    list-style: none;
}
.nav{
    display: flex;
}
.nav>.nav-item{
    position: relative;
}
.nav>.nav-item>.nav-link{
    padding: 35px 15px;
    text-transform: uppercase;
}
.nav-link{
    color: white;
    font-size: 22px;
    padding: 10px;
}
.nav-link:hover{color: yellow;}
.nav-dropdown{
    position: absolute;
    padding: 15px;
    top: 100%;
    left: 0;
    background: brown;
    border-top: 2px solid yellow;
    width: 200px;
    opacity: 0;
    margin-top: 20px;
    transition: all 300ms ease-in-out;
}
.nav-item:hover .nav-dropdown{
    opacity: 1;
    margin-top: 0;
}
.nav-dropdown+.nav-dropdown{
    left: 200px;
    border-left: 2px solid yellow;
}
.nav-dropdown .nav-item .nav-link:hover{
    background: rgba(205, 92, 92, 0.4);
    transform: translateX(5px);
    transition: all 300ms ease-in-out;
    box-shadow: inset 0 0 15px 5px indianred;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mega Menu Snippet</title>
    <link rel="stylesheet" href="style.css">
    <style>
        h1{
            color: white;
            font-family: monospace;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="contest/section.png" alt="logo">
        </div>
        <nav class="navbar"> 
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="">
                        Home
                    </a>
                    <ul class="nav-dropdown">
                        <h1>Section 1</h1>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 1
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 2
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 3
                            </a>
                        </li>
                    </ul>
                    <ul class="nav-dropdown">
                        <h1>Section 2</h1>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 1
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 2
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                Home 3
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">
                        About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">
                        Services
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
        <div class="user">
            <!-- Icons -->
        </div>
    </header>
</body>
</html>

Upvotes: 0

Sudarshan Mane
Sudarshan Mane

Reputation: 41

I got a solution without JavaScript.

Note: the following will work for vertical sidebar menu, for horizontal Menubar it will occur a little modification.

Look at the Image of my navbar attached below, without JavaScript:

    Wraper{
    width : 270px;//mandatory
    postion: relative; //mandatory
    height: 100vh; //it will strech menu to full page
    }
    
    inside first ul{
    position: relative;
    z-index: 999;   
    height: 100%;
    }
    
    inside second ul{
    display: none;//mandatory to hide initialy
    float: left;//mandatory
    clear: both;//mandatory
    position: absolute; //first step to solve your issue.
    left: 268; //2nd step - Put left value 2 unit less than width value in wrapper, so after removing mouse you wont face the issue.
    
    }

My navbar

Upvotes: 0

Dekel
Dekel

Reputation: 62536

You problem is that once you move your mouse from .nav-item a to the .sub-menu, the .nav-item a is no hovered so this select .nav-item a:hover ~ .sub-menu is not valid.

You can fix this by:

.nav-item a:hover ~ .sub-menu,  .sub-menu:hover {
    display: block;
    z-index: 9999;
}

Here is a codepen:
http://codepen.io/anon/pen/xEGbYa

This will make sure the .sub-menu will stay block while you hover it as well.

The problem now is that you got a new issue - once you move your mouse from the top menu (.nav-item a) to the sub menu (.sub-menu) - your top menu is not longer with the correct background.
To fix this you will need to change your html structure (or use javascript), because you can't select the a previous element based on current hovered element (the ~ selector is applied to the "next" element).

Upvotes: 2

Related Questions