How to make the dropdown overlap the other elements?

Question

How to make the dropdown overlap the other elements?

Navigation

#1 by (1 votes)

0

When I pass the button above the dropdown it does not overlap 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

asked by anonymous 24.05.2018 / 01:44

1 answer

API problem after doing deploy Get JS Variable value and pass to PHP and send by URL

score 1 · Answer 1

% w / w% will limit the display of all content within the element area. That's his job. So by expanding your menu, content that goes beyond that area is not displayed on the page.

To solve, remove the overflow from class overflow: hidden; .

See:

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><scriptsrc="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>