Dropdown-menu chỉ hiển thị bên trong thanh menu mà không xổ xuống

anhtrumxomnui · November 4, 2019, 2:45am

em bị lỗi dropdown-menu nó chỉ hiển thị bên trong thanh menu mà không xổ xuống như mong đợi. Mong mọi người ai đó fix dùm e. Các bác vào phần edit để lấy full code chứ nó k hiện thị được vài phần

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title></title>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <style type="text/css">

        html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}

body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
}

header {
      width: 100%;
      height: 100vh;
      background: url(http://static.wifi.danang.gov.vn/upload/userfiles/images/Fermani_shoes_5_doan_tran_nghiep_hanoi_vn1d.JPG) no-repeat 50% 50%;
      background-size: cover;
}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}

nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
}

nav ul {
      line-height: 60px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
}

nav.black ul {
      background: #000;
}

nav ul li {
      display: inline-block;
      padding: 16px 30px;;
}

nav ul li a {
      text-decoration: none;
      color: #fff;
      font-size: 16px;
}

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}

@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }

      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .menu-icon {
            display: block;
      }
      </style>
   </head>
   <body style="height: 4000px">
      <div class="wrapper">
         <header style="position: relative;z-index: 99">

            <nav>
               <div class="menu-icon">
                  <i class="fa fa-bars fa-2x"></i>
               </div>
               <div class="logo">
                  LOGO
               </div>
               <div class="menu">
                  <ul>
                     <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                     <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">BLOG<span class="caret"></span></a>
                <ul class="dropdown-menu" style="background: white;position: absolute !important; max-width: 100%;height: auto;">
                <li><a href="#">BLOG FULL WIDTH</a></li>
                <li><a href="#">BLOG WITH RIGHT SIDEBAR</a></li>
                <li><a href="#">BLOG WITH LEF SIDEBAR</a></li>
                 </ul>
          </li>
                     <li>                       
                         <form class="navbar-form" role="search">
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="Search" name="q">
                              <div class="input-group-btn">
                                <button class="form-control btn btn-default" style="border-radius: 0px 4px 4px 0px" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                             </div>
                          </div>
                       </form>
                     </li>
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Log In</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"><span class="badge badge-danger">0</span></span> Giỏ Hàng</a></li>
                     <li><a data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-envelope"></span> Liên Hệ</a></li>
                  </ul>
               </div>
            </nav>
         </header>
</div>
    <script type="text/javascript">
       $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                  $("nav ul").toggleClass("showing");
            });
      });

      // Scrolling Effect

      $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                  $('nav').addClass('black');
            }

            else {
                  $('nav').removeClass('black');
            }
})
    </script>
   </body>
</html>

SITUVN.gcd · November 14, 2018, 11:40am

Thêm css z-index cho nó. Tự Google.