Menu icon Foundation
DropdownMenu Hover Bug

Hey guys. I've a problem with my responsive or better Dropdown-Menu.

I attached a video where you can see the bug: https://goo.gl/SMxXu7 (via Sendvid)
There is no real hover-action on the last menu but it drops, if I hover whitespace between the links.

I only edited a bit code for the css-mainmenu but the bug will be there, even if I gonna remove my customs. I've noticed this in all of my browsers (Mac: Firefox 56.0, Chrome 62.0.3202.94, Safari 11.0.1 and also Windows Chrome, Firefox and Internet Explorer 11).

Let me know, if you need more information.

 

#main-menu { position: relative; }

#main-menu.dropdown {
   border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
    border-bottom-color: black;
    justify-content: space-between;
    text-overflow: ellipsis;
}

#main-menu.dropdown:after {
  content: '';
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

#main-menu.dropdown li {
    margin: 0 -20px 0;
    padding: 0 20px;
}

 

 

<nav id="main-menu" class="row col show-for-xlarge" data-toggler=".show-for-xlarge">          
    <div class="row">
        <div class="col">
            <ul class="vertical xlarge-horizontal menu" data-responsive-menu="accordion xlarge-dropdown" data-submenu-toggle="false" data-auto-height="false" data-animate-height="false">
                <li class="sheme-red"><a href="sheme/red.html" tabindex="1" data-rspv-xlarge="reset"><span data-rspv-base>ElementOne</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                        <li><a href="#"><span class="text-bold">Material</span></a></li>
                    </ul>
                </li>
                <li class="sheme-green"><a href="sheme/green.html" tabindex="1" data-rspv-medium="Werbeplanen" data-rspv-xlarge="Werbeplanen" data-rspv-huge="reset"><span data-rspv-base>Elements &amp; Two</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li aria-activedescendant="" class="sheme-turquoise"><a href="sheme/turquoise.html" tabindex="1"><span data-rspv-base>Elements</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-purple"><a href="sheme/purple.html" tabindex="1" data-rspv-xlarge="reset"><span data-rspv-base>Elements</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-orange"><a href="sheme/orange.html" tabindex="1"><span data-rspv-base>Element &amp; Element</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-blue"><a href="sheme/blue.html" tabindex="1" data-rspv-xlarge="Aufkleber" data-rspv-xxlarge="reset"><span data-rspv-base>Element &amp; Element</span></a>
                    <ul class="menu vertical nested xxlarge-w-250">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                        <li><a href="#"><span class="text-bold">Material</span></a></li>
                    </ul>
                </li>
                <li class="lastitem"><a href="/kundenkonto/pinnwand.html" tabindex="1" class="icon-left"><svg class="medium"><use xlink:href="#i-account" role="img" /></svg> <span>My Account</span></a>
                    <ul class="menu vertical nested">
                        <li class="lg"><a href="#">Test <span class="badge white">4</span></a></li>
                        <li class="lg"><a href="#">Test <span class="badge white">2</span></a></li>
                        <li class="lg mbottom"><a href="#">Test <span class="badge white">2</span></a></li>

                        <li><small>Kd-Nr.: 10122531</small> <a href="#/logout"><small>Abmelden</small></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

 

version 6.4.1

Hey guys. I've a problem with my responsive or better Dropdown-Menu.

I attached a video where you can see the bug: https://goo.gl/SMxXu7 (via Sendvid)
There is no real hover-action on the last menu but it drops, if I hover whitespace between the links.

I only edited a bit code for the css-mainmenu but the bug will be there, even if I gonna remove my customs. I've noticed this in all of my browsers (Mac: Firefox 56.0, Chrome 62.0.3202.94, Safari 11.0.1 and also Windows Chrome, Firefox and Internet Explorer 11).

Let me know, if you need more information.

 

#main-menu { position: relative; }

#main-menu.dropdown {
   border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
    border-bottom-color: black;
    justify-content: space-between;
    text-overflow: ellipsis;
}

#main-menu.dropdown:after {
  content: '';
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

#main-menu.dropdown li {
    margin: 0 -20px 0;
    padding: 0 20px;
}

 

 

<nav id="main-menu" class="row col show-for-xlarge" data-toggler=".show-for-xlarge">          
    <div class="row">
        <div class="col">
            <ul class="vertical xlarge-horizontal menu" data-responsive-menu="accordion xlarge-dropdown" data-submenu-toggle="false" data-auto-height="false" data-animate-height="false">
                <li class="sheme-red"><a href="sheme/red.html" tabindex="1" data-rspv-xlarge="reset"><span data-rspv-base>ElementOne</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                        <li><a href="#"><span class="text-bold">Material</span></a></li>
                    </ul>
                </li>
                <li class="sheme-green"><a href="sheme/green.html" tabindex="1" data-rspv-medium="Werbeplanen" data-rspv-xlarge="Werbeplanen" data-rspv-huge="reset"><span data-rspv-base>Elements &amp; Two</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li aria-activedescendant="" class="sheme-turquoise"><a href="sheme/turquoise.html" tabindex="1"><span data-rspv-base>Elements</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-purple"><a href="sheme/purple.html" tabindex="1" data-rspv-xlarge="reset"><span data-rspv-base>Elements</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-orange"><a href="sheme/orange.html" tabindex="1"><span data-rspv-base>Element &amp; Element</span></a>
                    <ul class="menu vertical nested">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                    </ul>
                </li>
                <li class="sheme-blue"><a href="sheme/blue.html" tabindex="1" data-rspv-xlarge="Aufkleber" data-rspv-xxlarge="reset"><span data-rspv-base>Element &amp; Element</span></a>
                    <ul class="menu vertical nested xxlarge-w-250">
                        <li><a href="#"><span class="text-bold">Products</span></a></li>
                        <li><a href="#"><span class="text-bold">Material</span></a></li>
                    </ul>
                </li>
                <li class="lastitem"><a href="/kundenkonto/pinnwand.html" tabindex="1" class="icon-left"><svg class="medium"><use xlink:href="#i-account" role="img" /></svg> <span>My Account</span></a>
                    <ul class="menu vertical nested">
                        <li class="lg"><a href="#">Test <span class="badge white">4</span></a></li>
                        <li class="lg"><a href="#">Test <span class="badge white">2</span></a></li>
                        <li class="lg mbottom"><a href="#">Test <span class="badge white">2</span></a></li>

                        <li><small>Kd-Nr.: 10122531</small> <a href="#/logout"><small>Abmelden</small></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>