skip to Main Content

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?

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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();
            });
        });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search