CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Stian
Stian

Reputation: 1602

JQuery dropdown menu in tandem with Bootstrap 4, child elements not expanding

Have a look at this JSfiddle.

The root menus expands on mouseover, as expected. But the child-items does not.

If you remove <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/> from the <head>-section, it will indeed work.

What is causing this conflict, and how can it be resolved?

Upvotes: 1

Views: 117

Answers (2)

VDesigner
VDesigner

Reputation: 86

Replace your jQuery classes same as below: 

$(function(){
        $('ul#menu li').hover(function(){
            //$('#drop' , this).css('display','block');
             $(this).children('ul').show();
        }, function(){
             $(this).children('ul').hide();
        });
    });

Upvotes: 3

Nisharg Shah
Nisharg Shah

Reputation: 19542

Here overflow style creates problem, bootstrap default behaviour is when you click or hover that apply overflow: hidden in element but you want to add child menu expand so, you need to add CSS

ul#menu > li ul.drop {
    overflow: visible !important;
}

!important is needed because that overflow condition is added via inline

UPDATED FIDDLE: http://jsfiddle.net/7f38r41z/

$(function(){
    $('ul#menu li').hover(function(){
        //$('#drop' , this).css('display','block');
         $(this).children('ul').slideDown(0);
    }, function(){
         $(this).children('ul').delay(0).slideUp(0);
    });
});
ul#menu {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

ul#menu > li {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

ul#menu a {
    text-decoration: none;
    color: #222;
    background: #ccc;
    display: block;
    padding: 10px;
}

ul#menu a:hover {
    text-decoration: none;
    color: #00f;
    background: #ff8;
    display: block;
    padding: 10px;
}

ul#menu > li ul.drop {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    overflow: visible !important;
}

ul#menu > li ul.drop ul {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    left: 150px;
    top: 0;
}

ul#menu > li ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
  </head>
  <body>
    <div class="row">
      <div class="col-lg-12">
        <ul id="menu">
          <li><a href="#">Home</a>
            <ul class="drop">
              <li><a href="#">About us</a></li>
              <li>
                <a href="#">About us ></a>
                <ul>
                  <li><a href="#">Sub Item 1</a></li>
                  <li>
                    <a href="#">Sub Item 2 ></a>
                    <ul>
                      <li><a href="#">Sub item 3</a></li>
                      <li><a href="#">Sub item 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">About</a>
            <ul class="drop">
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <h3>
          Page title
        </h3>
        <p>
          Page contents
        </p>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</body>
</html>

Upvotes: 0

Related Questions