Home>

If i click the hamburger menu, a drop-down menu is displayed. If i hover over a menu that has a lower menu, the lower menu is displayed.

I need to put a margin of about 10px between the upper menu and the lower menu, but when I move the mouse to the lower menu, the lower menu disappears.
How can I keep it displayed even if there is a margin?
Regardless of whether you use CSS or jQuery, thank you.

<a href = "#">
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <p>MENU</p>
  <ul>
    <li>AAAAA
      <ul>
        <li>BBBBB
          <ul>
            <li>CCCCC</li>
            <li>CCCCC</li>
            <li>CCCCC</li>
            <li>CCCCC</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</a>
. menu-area {
  @include clearfix;
  .menu-btn {
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: # 0caac6;
    width: 78px;
    height: 78px;
    padding: 16px 0 0;
    @include border-radius (50%);
    position: relative;
    z-index: 10;
    .burgar {
      width: 33px;
      height: 26px;
      position: relative;
      margin: 0 auto;
      span {
        position: absolute;
        left: 0;
        right: 0;
        height: 4px;
        background-color: #fff;
        &: nth-child (1) {
          top: 0;
        }
        &: nth-child (2) {
          top: 50%;
          margin-top: -2px;
        }
        &: nth-child (3) {
          bottom: 0;
        }
      }
    }
    p {
      font-size: 12px;
      padding-top: 10px;
    }
    position: relative;
    ul {
      width: 165px;
      background-color: #eee;
      margin-right: 10px;
      @include border-radius (5px);
      li {
        text-align: left;
        color: # 000;
        font-size: 14px;
        padding: 10px;
      }
    }
    .menu-second-level {
      position: absolute;
      top: 100px;
      left: 25px;
      display: none;
      li {
        position: relative;
        .menu-third-level {
          position: absolute;
          left: 105%;
          top: 0;
          display: none;
          li {
            .menu-forth-level {
              position: absolute;
              left: 105%;
              top: 0;
              display: none;
            }
          }
        }
      }
    }
  }
$(document) .ready (function () {
    var menuBtn = $('. menu-btn');
    menuBtn.on ('click', function (e) {
        $(". menu-second-level"). show ();
        return false;
    });
    $('. menu-second-level>li'). on ({
        'mouseenter': function () {
            $(". menu-third-level", this) .show ();
        },
        'mouseleave': function () {
            $(". menu-third-level", this) .hide ();
        }
    });
});
  • Answer # 1

    The problem is thatmarginin the first place, becauseli elementetc. in the lower-level menu are absolutely arranged usingleft propertyetc. I don't think it's a problem withpadding. If you can't change HTML and CSS, it's a bit cumbersome, but I think you can use theafter pseudo element.

    . menu-area {
      @include clearfix;
      .menu-btn {
        display: block;
        color: #fff;
        text-align: center;
        text-decoration: none;
        background-color: # 0caac6;
        width: 78px;
        height: 78px;
        padding: 16px 0 0;
        @include border-radius (50%);
        position: relative;
        z-index: 10;
        .burgar {
          width: 33px;
          height: 26px;
          position: relative;
          margin: 0 auto;
          span {
            position: absolute;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #fff;
            &: nth-child (1) {
              top: 0;
            }
            &: nth-child (2) {
              top: 50%;
              margin-top: -2px;
            }
            &: nth-child (3) {
              bottom: 0;
            }
          }
        }
        p {
          font-size: 12px;
          padding-top: 10px;
        }
        ul {
          width: 165px;
          background-color: #eee;
          margin-right: 10px;
          @include border-radius (5px);
          li {
            text-align: left;
            color: # 000;
            font-size: 14px;
            padding: 10px;
          }
        }
        .menu-second-level {
          position: absolute;
          top: 100px;
          left: 25px;
          display: none;
          li {
            position: relative;
            &:: after {/ * Addendum * /
              content: "";
              position: absolute;
              top: 0;
              left: 100%;
              width: 10px;
              height: 42px;
            }
            .menu-third-level {
              position: absolute;
              left: calc (100% + 10px);/* modify * /
              top: 0;
              display: none;
              li {
                .menu-forth-level {
                  position: absolute;
                  left: 105%;
                  top: 0;
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    Here is the code that was used to check the operation. If the above code does not work properly in the questioner's environment, try the following code once.

    <! doctype html>
    <html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .menu-area {
                overflow: hidden;
                * zoom: 1;
                height: 500px;/* Append * /
                background: # 000;/* Added * /
            }
            .menu-area .menu-btn {
                display: block;
                color: #fff;
                text-align: center;
                text-decoration: none;
                background-color: # 0caac6;
                width: 78px;
                height: 78px;
                padding: 16px 0 0;
                border-radius: 50%;
                position: relative;
                z-index: 10;
            }
            .menu-area .menu-btn .burgar {
                width: 33px;
                height: 26px;
                position: relative;
                margin: 0 auto;
            }.menu-area .menu-btn .burgar span {
                position: absolute;
                left: 0;
                right: 0;
                height: 4px;
                background-color: #fff;
            }
            .menu-area .menu-btn .burgar span: nth-child (1) {
                top: 0;
            }
            .menu-area .menu-btn .burgar span: nth-child (2) {
                top: 50%;
                margin-top: -2px;
            }
            .menu-area .menu-btn .burgar span: nth-child (3) {
                bottom: 0;
            }
            .menu-area .menu-btn p {
                font-size: 12px;
                padding-top: 10px;
            }
            .menu-area .menu-btn ul {
                width: 165px;
                background-color: #eee;
                margin-right: 10px;
                border-radius: 5px;
            }
            .menu-area .menu-btn ul li {
                text-align: left;
                color: # 000;
                font-size: 14px;
                padding: 10px;
            }
            .menu-area .menu-btn .menu-second-level {
                position: absolute;
                top: 100px;
                left: 25px;
                display: none;
            }
            .menu-area .menu-btn .menu-second-level li {
                position: relative;
            }
            .menu-area .menu-btn .menu-second-level li :: after {/ * append * /
                content: "";
                position: absolute;
                top: 0;
                left: 100%;
                width: 10px;
                height: 42px;
            }
            .menu-area .menu-btn .menu-second-level li .menu-third-level {
                position: absolute;
                left: calc (100% + 10px);/* modify * /
                top: 0;
                display: none;
            }
            .menu-area .menu-btn .menu-second-level li .menu-third-level li .menu-forth-level {
                position: absolute;
                left: 105%;
                top: 0;
                display: none;
            }
        </style>
    </head>
    <body>
    <div>
        <a href = "#">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <p>MENU</p>
            <ul>
                <li>AAAAA
                    <ul>
                        <li>BBBBB
                            <ul>
                                <li>CCCCC</li>
                                <li>CCCCC</li>
                                <li>CCCCC</li>
                                <li>CCCCC</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </a>
    </div>
    <script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document) .ready (function () {
            var menuBtn = $('. menu-btn');
            menuBtn.on ('click', function (e) {
                $(". menu-second-level"). show ();
                return false;
            });
            $('. menu-second-level>li'). on ({
                'mouseenter': function () {
                    $(". menu-third-level", this) .show ();
                },
                'mouseleave': function () {
                    $(". menu-third-level", this) .hide ();
                }
            });
        });
    </script>
    </body>
    </html>

  • Answer # 2

    The question was asked because the content presented cannot reproduce the situation
    "How can I keep it displayed even if there is a margin?
    * It is assumed that other operations are performed well on your own.
    If you just focus on answering,

    Nesting a div or something in li and css that is currently applied to li
    Apply to div.
    If you do not apply a background color to li and pad the desired margin
    You can see what you want.

  • Answer # 3

    Add the original code of@includesuch as@include clearfix. Because the situation cannot be reproduced.
    cf. Sass @import rules

    (HTML adds.menu-areaoutsidea.menu-btn)