Why are the <div> borders bleeding through the <ul>?-CodePudding

I've recently gotten back into coding, and continuing off where I left, trying to create a mobile-first site for a hypothetical apartment website.

With that being said, I've noticed that bottom border of a different is visible through the one containing the element.

The is within the tag with the id "sidebar". Not the most aesthecally-pleasing side nav (as fonts is my weak point).

Picture

HTML:

<div >

      <div id="sidebar">

        <ul>
          <li>Home</li>
          <li>Amenities</li>
          <li>Floor Plans</li>
          <li>About Us</li>
        </ul>
  
        
      </div><!--close #sidebar-->

CSS:

#sidebar {
  left: 0px;
  width: 50%;
  border-top-right-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-color: black;
  color: white;
  /*border: 1px solid white;*/
  text-align: center;
  position: absolute;
  display: none;
  
}

jQuery:

 $("#hamburger_menu").click(function() {
    $("#sidebar").toggle(1000);
  });

If people would like more code snippets, including the one with id of the whose borders is bleeding through, please let me know!

CodePudding user response：

My guess is that it's because of the

position: absolute

Try playing around with this and also height of the sidebar.

CodePudding user response：

try to make the ul higher z-index

ul {
position: absolute;
z-index:9;
}