0

I am trying to display drop down menu items, but when I hover my cursor on menu item the entire navbar is expanding. I have tried with position: absolute and relative.

<nav class ="navbar">
<div class="menu-bar">
<div class="dropdown">
 <li class="dropbtn" style ="list-style: none" >Know us</li> 
        
<div class="dropdown-content">
<ul class="sub_menu">
<li><a href=" ">About us</a></li> 
</ul> 
</div>


  .navbar {
   overflow: hidden;        
  }
 .dropdown {
   float: left;
   overflow: hidden; 
 }     
 .dropdown .dropbtn {
  display: inline-block; 
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit; 
 } 
 .dropdown-content {
   display: none;
   position: relative; 
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
  }
  .dropdown-content a {
     float: none;          
     padding: 12px 16px; 
     display: block;         
    } 
   .dropdown:hover .dropdown-content {
    display: block;
    } 
3
  • 1
    Can you provide your html as well? Jun 29, 2020 at 16:16
  • Please make minimal reproducible example
    – ikiK
    Jun 29, 2020 at 16:22
  • <div class="menu-bar"> <div class="dropdown"> <ul class="menu hidden-xs hidden-sm"> <li class="dropbtn" style ="list-style: none" >Know us </li> <div class="dropdown-content"> <ul class="sub_menu"> <li><a href=" ">About us</a></li> </ul> </div> <li class="dropbtn" style ="list-style: none">Services</li> <div class="dropdown-content"> <ul class="sub_menu sub_menu2"> <li><a href=" ">AI as a Service</a></li> </ul> </div> </ul> </div> </div>
    – Madhavi
    Jun 29, 2020 at 16:34

1 Answer 1

-1

use flex-box for easy navigation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.