How to reduce the space between the dropdown menu items?

Question

I created a navbar menu which has a dropdown list each nav item. I would like to reduce between each dropdown menu item vertically.

I already set the padding and margin of the li, ul and li a to 0px but it didn't change.

 ul li ul li a { color: #404040; font-size: 28px; font-weight: 400; padding-left: 10px; margin: 0px; text-align: left; } li { display: block; transition-duration: 0.5s; } li:hover { cursor: pointer; } ul li ul { background-color: #ffffff; visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; display: none; width: 200px; padding: 0px; margin: 0px; } ul li:hover>ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul:hover { background-color: #e6e6e6; } ul li ul li { clear: both; width: 90%; border-bottom: 1px solid #e0e0e0; padding: 0px; margin: 0px; }

 <ul class="navbar"> <li nav-item> <a href="#">NAV ITEM 1</a> <ul> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <div> <img src="#"> </div> </li> </ul> </li> <li> <a href="#">NAV ITEM 2</a> <ul> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <div> <img src="#"> </div> </li> </ul> </li> <li> <a href="#">NAV ITEM 3</a> <ul> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <a href="#">DROPDOWN MENU ITEM</a> </li> <li> <div> <img src="#"> </div> </li> </ul> </li> </ul>

I can see some space between the dropdown menu item vertically and would like to reduce it so it only has enough space vertically for the items.

Answer 1

You can reduce spacing of li elements with line-height property, for example in you case 22px will get li items very close.

ul li ul li {
  line-height:22px;
}

Answer 2

Once you've determined that padding is still present, you can experiment to determine the proper amount needed. Mark as important if possibly referenced elsewhere to enforce the new spacing.

    #NAV ul.nav li a {
    padding: 8.5px !important;
    }