CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menu
Pela647
Pela647

Reputation: 31

Bootstrap Drop Down menu

I am using bootstrap to create a drop down menu. However, I when I click Dropdown1, the contents of Dropdown1 cover the menu Dropdown2. What I want is, when I click Dropdown1, its menu should be between Dropdown1 and Dropdown2 or Dropdown2 should be pushed downwards when the contents of Dropdown1 open.

This is the code I am applying;

    <!DOCTYPE html>
    <html lang="en">
    <head>



      <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
    </head>
<body>

<div class="container">

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown1
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">python</a></li>
      <li><a href="#">java</a></li>
    </ul>
  </div>
</div>
<div class="container">

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown2
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">C#</a></li>
      <li><a href="#">perl</a></li>
    </ul>
  </div>
</div>


</body>
</html>

Upvotes: 0

Views: 1949

Answers (1)

ab29007
ab29007

Reputation: 7766

Add this to your css:

ul.dropdown-menu{
  position:static;
  float:none;
  width:150px;
}

See it working Here:

ul.dropdown-menu{
  position:static;
  float:none;
  width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      
      <div class="dropdown clearfix">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown1
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">python</a></li>
          <li><a href="#">java</a></li>
        </ul>
      </div>
    </div>
    <div class="container">
      
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown2
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">C#</a></li>
          <li><a href="#">perl</a></li>
        </ul>
      </div>
    </div>

Upvotes: 2

Related Questions