How to make the dropdown overlap the other elements?

Asked

Viewed 762 times

0

When I push the button over the dropdown it does not override the other elements of the navbar only site.

HTML

    <nav class="navbar">
        <a href="#">INÍCIO</a>
        <a href="#">SOBRE</a>
        <a href="#">ASSISTIR</a>
        <a href="#">NOTÍCIAS</a>
        <a href="#">PERGUNTAS FREQUENTES</a>
        <a href="#">FÓRUNS</a>
            <div class="dropdown">
            <button class="dropbtn">PRODUTOS</button>
            <div class="dropdown-content">
                <a href="#">LINK 1</a>
                <a href="#">LINK 2</a>
            </div>
        <a href="#">ASSISTÊNCIA</a>
    </nav>

CSS

        body {
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #2A2A2A;
            overflow: hidden;
        }           

        .navbar a {
            float: left;
            color: lightgrey;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 12px;
        }

        .dropbtn {
            background-color: #2A2A2A;
            color: lightgrey;
            border: none;
            margin-top: 12px;
            position: relative;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #2A2A2A;
            min-width: 180px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: lightgrey;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
html css

  • try to see this https://codepen.io/lennon/pen/qNaqNB

  • Gabriel, if you can give feedback if the answer solved the problem. If you can mark it as right to finish the question. Obg!

1 answer

1

The overflow will limit the display of all content within the element area. This is its function. So when expanding your menu, content that exceeds this area is not displayed on the page.

To resolve, remove the overflow: hidden; class .navbar.

Behold:

body {
   margin: 0;
   padding: 0;
}

.navbar {
   background-color: #2A2A2A;
   /* overflow: hidden; */
}           

.navbar a {
   float: left;
   color: lightgrey;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 12px;
}

.dropbtn {
   background-color: #2A2A2A;
   color: lightgrey;
   border: none;
   margin-top: 12px;
   position: relative;
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #2A2A2A;
   min-width: 180px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

.dropdown-content a {
   color: lightgrey;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

.dropdown:hover .dropdown-content {
   display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<nav class="navbar">
  <a href="#">INÍCIO</a>
  <a href="#">SOBRE</a>
  <a href="#">ASSISTIR</a>
  <a href="#">NOTÍCIAS</a>
  <a href="#">PERGUNTAS FREQUENTES</a>
  <a href="#">FÓRUNS</a>
      <div class="dropdown">
      <button class="dropbtn">PRODUTOS</button>
      <div class="dropdown-content">
          <a href="#">LINK 1</a>
          <a href="#">LINK 2</a>
      </div>
  <a href="#">ASSISTÊNCIA</a>
</nav>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.