dropdown submenu over div


Ask A Question





Login To post a question

I’m having trouble with the display for small screens, particularly the drop down sub menu, when the drop down is clicked it affects the display and it won’t align right, how do I display it on top of the div with proper alignment, it seems to be fine on bigger / wider screens,

please see below sample css and html code, i’m using bootstrap 4:

thank you in advance

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col--1 container-border navbar navbar-expand-sm bg-dark navbar-dark text-center">
    <a class="navbar-brand" href="home.html"><span class="oi oi-home" title="home" aria-hidden="true"></span></a>
  </div>
  <div class="col--3 container-border navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav" id="myNavbar">
      <li class="nav-item dropdown" style="z-index: 1;">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Menu</a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu" style="z-index: 2;">
          <li class="dropdown-submenu">
            <a class="dropdown-item" tabindex="-1" href="#">Sub Menu</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 1</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 2</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 3</a></li>
            </ul>
          </li>
          <hr>
          <li class="dropdown-submenu">
            <a class="dropdown-item" tabindex="-1" href="#">Sub Menu 2</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 1</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 2</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 3</a></li>
            </ul>
          </li>
          <hr>
          <li class="dropdown-submenu">
            <a class="dropdown-item" tabindex="-1" href="#">Sub Menu 3</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 1</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 2</a></li>
              <hr>
              <li class="dropdown-item"><a tabindex="-1" href="#">Drop 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="col container-border navbar navbar-expand-sm bg-dark navbar-dark btn-group ml-auto container-border">
    <form name="frm1" class="form-inline btn-group-sm" action="/action_page.php">
      <div class="input-group ml-auto">
        <input type="text" class="form-control">
        <div class="input-group-btn">
          <button class="btn btn-light" type="submit">
    					<span class="oi oi-magnifying-glass" title="icon magnify" aria-hidden="true"></span>
    					</button>
        </div>
      </div>
    </form>
  </div>
  <div class="col--1 container-border navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="#"><span class="badge badge-secondary badge-pill">0</span><span class="oi oi-cart" title="cart" aria-hidden="true"></span></a>
  </div>
</div>

i wish it could behave like the big screen, please

For more info please click herehttps://stackoverflow.com/q/55100655



Have a question or need a custom quote?
info@smartinfocare.com