Get elements within a dropdown container to be next to eachother-CodePudding

I have a dropdown list and I cant get all of the elements within the container to be right next to eachother. Before opening the list and after there is a space that I want to make go away. I tried changing the margins but that did not help at all. I want to get rid of the whitespace before opening the list as well as the space that is left underneath the top text after opening one of the list elements.

CSS

a {
color: white;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}

.dropdown-container {
  position: relative; /* create a positioning context for the list items */
  background-color: #333;
    color: white;
    text-decoration: none;
width: 150px;
text-align: center;
    transition: background-color 0.2s;
}

.dropdown-list {
  position: relative; /* position the list items absolutely */
 display: none; /* hide the list by default */
  top: 100px; /* hide the list by default */
  list-style-type: none; /* remove the bullet points for the list items */
  padding: 0; /* remove the padding for the list */
  left: 0; /* position the list items at the left edge of the list */
  transition: border 0.2s; /* add a transition effect for the border */
  background-color: #b0b0b0;
  color: black;
  text-decoration: none;
width: 150px;
    text-align: center;
    transition: background-color 0.2s;
}

.dropdown-list li:hover {
  background-color: #04AA6D;
    transition: background-color 0.2s;}/* change the background color of the list items 
to green when they are hovered over */
}
.dropdown-list li {
  color: black; /* set the color of the list items to black */
    text-align: center;
    transition: background-color 0.2s;
}

HTML

<div >
  <p><a href="#" onclick="toggleVisibility(this)">Global Models</a></p>
  <ul >
    <li><a href="#">GFS</a></li>
    <li><a href="#">CMC</a></li>
    <li><a href="#">ECMWF</a></li>
  </ul>
</div>
<div >
  <p><a href="#" onclick="toggleVisibility(this)">Mesoscale Models</a></p>
  <ul >
      <li><a href="#">NAM 12km</a></li>
    <li><a href="#">NAM 3km</a></li>
    <li><a href="#">HRRR</a></li>
  </ul>
</div>
<div >
  <p><a href="#" onclick="toggleVisibility(this)">Ensembles</a></p>
  <ul >
      <li><a href="#">GEFS</a></li>
    <li><a href="#">GEPS</a></li>
    <li><a href="#">Super Ensemble</a></li>
  </ul>
</div>

    function toggleVisibility(link) {
  // get the corresponding list
  var list = link.parentElement.nextElementSibling;

  // toggle the visibility of the list
  if (list.style.display === "none") {
    // hide all other lists
    var otherLists = document.querySelectorAll(".dropdown-list");
    for (var i = 0; i < otherLists.length; i  ) {
      otherLists[i].style.display = "none";
    }

    // position the selected list below the previous list
    list.style.top = (link.parentElement.offsetTop   link.parentElement.offsetHeight)   
"px";

    // show the selected list
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}

Thanks

CodePudding user response：

By checking in the DevTools, you have a margin on p and ul.dropdown-list elements.

So if you do these changes in CSS, it should do the magic to remove the whitespaces:

p {
  margin: 0;
}

.dropdown-list {
  margin: 0; /* <-- add this to the existing CSS code*/
  /* the rest */
}

But then it seems also that you need to change the JS to not have the last subitem hidden under the rest of the menu:

    // position the selected list below the previous list
    list.style.top = "0px"; // <- change

Now there is no whitespace and the menu seems to render correctly.