menu disappear when hover the list item

Question

when i hover over the hamburger icon in 1000px mode the menu appears, but when i hover over menu it disappears. i have tried z-index and tricks related to position but cannot get the solution. the issue is in 1000px because in full screen mode i can hover over sub-menu, but not on 1000px screen. please help, thank you.




    
    
    ESPN
    
    


    
        ESPN / Media Distribution
        
        
        
            
                

                
                    
                        Sports Programming
                        
                            Boxing
                            Films
                            Fina
                            World Athletics
                            Ncaa
                            Pocker
                            Special Olympics
                            X Games
                        
                    
                    Content Calender
                    
                        Contacts
                        
                            Asia Pacific
                            Canada
                            Europe, Middle East and Africa
                            Latin America
                            Mexico
                        
                    
                
                
                    
                        
                    
                
            
        
    
    
        
            
        
        
            ESPN / Media Distribution
        
    

    
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    
    
        
            Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy
        
    




@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    font-family: 'Fira Sans', sans-serif;
    line-height: 1.6rem;
}
body {
    font-size: 1.6rem;
}
.header {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color:rgb(202, 8, 19);
    color: #fff;
    border-bottom: 1px solid #fff;
}
.header__logo {
    font-size: 20px;
    line-height: 50px;
    user-select: none;
}
.header__logo span {
    font-style: oblique;
}
.navbar__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.navbar__lists__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
}
.navbar__lists__items > li {
    margin: 0 5px;
}
.navbar__lists__items__item {
    width: 250px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 59px;
    left: 0px;
    right: 0;
    list-style: none;
    transition: all 0.3s;
}
.navbar__lists__items__item li {
    cursor: pointer;
    border: 1px solid #666;
    background-color: #fff;
    line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
    background-color: #666666;
    color: #fff;
}
.navbar__lists__items__item li a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color: #666666;
    text-transform: uppercase;
}
.navbar__hover__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    line-height: 50px;
    z-index: 1;
}
.navbar__hover__items > a {
    margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
    content: ' \02C5';
}
.navbar__lists__items > li > a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
    background-color: #fff;
    color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-10px);
}
.search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search input {
    border: 1px solid #fff;
    outline: none;
    border-radius: 5px;
    padding: 5px;
}
.search i {
    position: absolute;
    color: #000;
    top: 50%;
    left: 95%;
    transform: translate(-95%, -50%);
    margin-right: -30px;
}
.video__section {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 40px;
}
.video__header__wrapper {
    width: 100%;
    height: 100%;    
}
.video__header__wrapper video {
    width: 100%;
    height: 100%;
}
.video__section__content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    user-select: none;
}
.video__section__content span {
    font-style: oblique;
}
.image__section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.image__section .image {
    flex-basis: 25%;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 150px;
}
.image__section .image img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform: scale(1.1);
    transition: all 0.3s;
}
.overlay {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 100%;
    background-color: #000;
    width: 100%;
    overflow: hidden;
    opacity: 0.7;
    transition: 0.3s ease;
}
.image:hover img {
    transform: scale(1);
}
.image:hover > .overlay {
    height: 100%;
    bottom: 0;
}
.copyright__section {
    font-size: 10px;
    background-color: rgb(202, 8, 19);
    color: #fff;
}
.copyright__section__content {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 30px;
}

@media (max-width: 1000px) {
    .header {
        padding: 0 10px;
    }
    .navbar__items {
        position: relative;
    }
    .navbar__lists__items {
        display: none;
        position: absolute;
        top: 50px;
        right: 50px;
        width: 300px;
        padding: 0 10px;
        background-color: #fff;
        font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
        z-index: 1;
        box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
    }
    .navbar__lists__items > li > a {
        color: #000;
    }
    .navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
        content: "";
        display: block;
    }
    .navbar__hover__items {
        display: block;
        color: #000;
    }
    .navbar__lists__items__item {
        display: none;
    }
    .video__section {
        font-size: 35px;
    }
    .search {
        height: 50px;
    }
    .hamburger__icon__section {  
        display: flex;
        justify-content: flex-end;
        flex: 2;
    }
    .hamburger__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        margin-right: 10px;
        cursor: pointer;
    }
    .hamburger__icon > div {
        width: 25px;
        height: 2px;
        margin: 3px 0;
        background-color: #fff;
    }
    .hamburger__icon:hover + .navbar__lists__items {
        display: block;
    }
}

user_7864080 · Answer

You could handle the show/hide using javascript instead of css because the way you do it right now whenever the browser detects your cursor is no longer on top of the hamburger_buttton it will hide your menu so it would be better to handle the event with a click instead. Or you can check this answer. Hope it helps.

let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');

hamburgetButton.onclick = function () {
  navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Fira Sans', sans-serif;
  line-height: 1.6rem;
}

body {
  font-size: 1.6rem;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background-color: rgb(202, 8, 19);
  color: #fff;
  border-bottom: 1px solid #fff;
}

.header__logo {
  font-size: 20px;
  line-height: 50px;
  user-select: none;
}

.header__logo span {
  font-style: oblique;
}

.navbar__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.navbar__lists__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  list-style: none;
}

.navbar__lists__items>li {
  margin: 0 5px;
}

.navbar__lists__items__item {
  width: 250px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 59px;
  left: 0px;
  right: 0;
  list-style: none;
  transition: all 0.3s;
}

.navbar__lists__items__item li {
  cursor: pointer;
  border: 1px solid #666;
  background-color: #fff;
  line-height: 1.6rem;
}

.navbar__lists__items__item li a:hover {
  background-color: #666666;
  color: #fff;
}

.navbar__lists__items__item li a {
  padding: 10px 20px;
  display: block;
  text-decoration: none;
  color: #666666;
  text-transform: uppercase;
}

.navbar__hover__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  line-height: 50px;
  z-index: 1;
}

.navbar__hover__items>a {
  margin-right: 5px;
}

.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
  content: ' \02C5';
}

.navbar__lists__items>li>a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.navbar__hover__items:nth-child(2n+1):hover>a {
  background-color: #fff;
  color: rgb(202, 8, 19);
}

.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-10px);
}

.search {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search input {
  border: 1px solid #fff;
  outline: none;
  border-radius: 5px;
  padding: 5px;
}

.search i {
  position: absolute;
  color: #000;
  top: 50%;
  left: 95%;
  transform: translate(-95%, -50%);
  margin-right: -30px;
}

.video__section {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  font-size: 40px;
}

.video__header__wrapper {
  width: 100%;
  height: 100%;
}

.video__header__wrapper video {
  width: 100%;
  height: 100%;
}

.video__section__content {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  user-select: none;
}

.video__section__content span {
  font-style: oblique;
}

.image__section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.image__section .image {
  flex-basis: 25%;
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 150px;
}

.image__section .image img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: scale(1.1);
  transition: all 0.3s;
}

.overlay {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 100%;
  background-color: #000;
  width: 100%;
  overflow: hidden;
  opacity: 0.7;
  transition: 0.3s ease;
}

.image:hover img {
  transform: scale(1);
}

.image:hover>.overlay {
  height: 100%;
  bottom: 0;
}

.copyright__section {
  font-size: 10px;
  background-color: rgb(202, 8, 19);
  color: #fff;
}

.copyright__section__content {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 30px;
}

@media (max-width: 1000px) {
  .header {
    padding: 0 10px;
  }
  .navbar__items {
    position: relative;
  }
  .navbar__lists__items {
    display: none;
    position: absolute;
    top: 50px;
    right: 50px;
    width: 300px;
    padding: 0 10px;
    background-color: #fff;
    font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    z-index: 1;
    box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
  }
  .navbar__lists__items>li>a {
    color: #000;
  }
  .navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
    content: "";
    display: block;
  }
  .navbar__hover__items {
    display: block;
    color: #000;
  }
  .navbar__lists__items__item {
    display: none;
  }
  .video__section {
    font-size: 35px;
  }
  .search {
    height: 50px;
  }
  .hamburger__icon__section {
    display: flex;
    justify-content: flex-end;
    flex: 2;
  }
  .hamburger__icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 10px;
    cursor: pointer;
  }
  .hamburger__icon>div {
    width: 25px;
    height: 2px;
    margin: 3px 0;
    background-color: #fff;
  }
}





  
  
  ESPN
  
  



  
    ESPN / Media Distribution
    
    
    
      
        
          
          
          
        
        
          
            Sports Programming
            
              Boxing
              Films
              Fina
              World Athletics
              Ncaa
              Pocker
              Special Olympics
              X Games
            
          
          Content Calender
          
            Contacts
            
              Asia Pacific
              Canada
              Europe, Middle East and Africa
              Latin America
              Mexico
            
          
        
        
          
          
          
        
      
    
  
  
    
      
    
    
      ESPN / Media Distribution
    
  

  
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
  
  
    
      Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy

user_3383853 · Answer

Simply add this to your selector :

, .navbar__lists__items:hover

The full rule should look like this :

.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
    display: block;
}

user_14236750 · Answer

This is happening since the scope of hover effect is only limited to the hamburger icon and as soon as the hover scope is left, the css does not execute for it so in order to stabilize the menu items I have added hover scope to that

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    font-family: 'Fira Sans', sans-serif;
    line-height: 1.6rem;
}
body {
    font-size: 1.6rem;
}
.header {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color:rgb(202, 8, 19);
    color: #fff;
    border-bottom: 1px solid #fff;
}
.header__logo {
    font-size: 20px;
    line-height: 50px;
    user-select: none;
}
.header__logo span {
    font-style: oblique;
}
.navbar__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.navbar__lists__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
}
.navbar__lists__items > li {
    margin: 0 5px;
}
.navbar__lists__items__item {
    width: 250px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 59px;
    left: 0px;
    right: 0;
    list-style: none;
    transition: all 0.3s;
}
.navbar__lists__items__item li {
    cursor: pointer;
    border: 1px solid #666;
    background-color: #fff;
    line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
    background-color: #666666;
    color: #fff;
}
.navbar__lists__items__item li a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color: #666666;
    text-transform: uppercase;
}
.navbar__hover__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    line-height: 50px;
    z-index: 1;
}
.navbar__hover__items > a {
    margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
    content: ' \02C5';
}
.navbar__lists__items > li > a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
    background-color: #fff;
    color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-10px);
}
.search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search input {
    border: 1px solid #fff;
    outline: none;
    border-radius: 5px;
    padding: 5px;
}
.search i {
    position: absolute;
    color: #000;
    top: 50%;
    left: 95%;
    transform: translate(-95%, -50%);
    margin-right: -30px;
}
.video__section {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 40px;
}
.video__header__wrapper {
    width: 100%;
    height: 100%;    
}
.video__header__wrapper video {
    width: 100%;
    height: 100%;
}
.video__section__content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    user-select: none;
}
.video__section__content span {
    font-style: oblique;
}
.image__section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.image__section .image {
    flex-basis: 25%;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 150px;
}
.image__section .image img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform: scale(1.1);
    transition: all 0.3s;
}
.overlay {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 100%;
    background-color: #000;
    width: 100%;
    overflow: hidden;
    opacity: 0.7;
    transition: 0.3s ease;
}
.image:hover img {
    transform: scale(1);
}
.image:hover > .overlay {
    height: 100%;
    bottom: 0;
}
.copyright__section {
    font-size: 10px;
    background-color: rgb(202, 8, 19);
    color: #fff;
}
.copyright__section__content {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 30px;
}

@media (max-width: 1000px) {
    .header {
        padding: 0 10px;
    }
    .navbar__items {
        position: relative;
    }
    .navbar__lists__items {
        display: none;
        position: absolute;
        top: 50px;
        right: 50px;
        width: 300px;
        padding: 0 10px;
        background-color: #fff;
        font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
        z-index: 1;
        box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
    }
    .navbar__lists__items > li > a {
        color: #000;
    }
    .navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
        content: "";
        display: block;
    }
    .navbar__hover__items {
        display: block;
        color: #000;
    }
    .navbar__lists__items__item {
        display: none;
    }
    .video__section {
        font-size: 35px;
    }
    .search {
        height: 50px;
    }
    .hamburger__icon__section {  
        display: flex;
        justify-content: flex-end;
        flex: 2;
    }
    .hamburger__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        margin-right: 10px;
        cursor: pointer;
    }
    .hamburger__icon > div {
        width: 25px;
        height: 2px;
        margin: 3px 0;
        background-color: #fff;
    }
/* added another line here */
    .hamburger__icon:hover + .navbar__lists__items,
    .hamburger__icon + .navbar__lists__items:hover{
        display: block;
    }
}




    
    
    ESPN
    
    


    
        ESPN / Media Distribution
        
        
        
            
                

                
                    
                        Sports Programming
                        
                            Boxing
                            Films
                            Fina
                            World Athletics
                            Ncaa
                            Pocker
                            Special Olympics
                            X Games
                        
                    
                    Content Calender
                    
                        Contacts
                        
                            Asia Pacific
                            Canada
                            Europe, Middle East and Africa
                            Latin America
                            Mexico
                        
                    
                
                
                    
                        
                    
                
            
        
    
    
        
            
        
        
            ESPN / Media Distribution
        
    

    
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    
    
        
            Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy

menu disappear when hover the list item

3 Answers