javascript - When hovered over the Foundation Jquery menu (without dropdowns) a white patch appears -


i used foundation top bar create menu. none of elements have drop downs. if hover on item leave behind white patch :

enter image description here

this happens in google chrome. when tried in firefox works fine! how rid of patch?

here's link live website : http://secret-temple-3539.herokuapp.com/

the css file :

    @import "compass";     $top-bar-color: rgba(17, 17, 17, 0.2);      body{         font-family: 'comfortaa', cursive !important;     }      .top-bar-section{         a{             font-family: 'comfortaa', cursive !important;             background: transparent !important;             @include transition-property(all);         @include transition-duration(0.3s);         @include transition-timing-function(ease-in);              &:hover{                 background: none repeat scroll 0 0 rgba(17, 17, 17, 0.2) !important;                 @include border-radius(50px);                 color: #ffffff !important;             }         }     }      .top-bar{         z-index: 10 !important;         -moz-animation-duration: 1.8s;         -webkit-animation-duration: 1.8s;         -o-animation-duration: 1.8s;         -ms-animation-duration: 1.8s;         animation-duration: 1.8s;          li{             background: transparent !important;         }     }      #title{         float: left;         margin-left: -1000000000000000px;     }      #hometop{         height: 65%;         background-image: image-url("leafyhomebg.jpg");         background-repeat: no-repeat;         background-size: 100% auto;         overflow: hidden;         z-index: -1 !important;     }      #home{         overflow: hidden;         height: 100%;         background-image: image-url("homebg.jpg");     }      .fixed-custom{         position:fixed;         z-index: 99;         width:100%;     }      #leaflogo{             display: block;         height: 24%;         margin-left: auto;         margin-right: auto;         margin-top: 8%;     }      .himsg{         color: #e9e9e9;         font-size: 242%;         font-size: 2vw;         font-weight: 100;         margin-top: 2%;         text-align: center;           &.linetwo{             margin-top: -28px;             margin-top: 2.8%;         }          .emtxt{             color: #b3b3b3;         }     }      .simgcont{         width: 20%;         float: left;          .simg{                 border: 3px solid #ffffff;         border-radius: 50%;         box-shadow: 0 0 2px #828282;         display: block;         margin-left: auto;         margin-right: auto;         opacity: 0.7 !important;         width: 43%;         }     }      .simgwrap{         margin-top: 1%;     } 

ps : think links... go link again , refresh... see. have added links @ bottom , when hover them, again big patch appears!

i found problem. in piece of code :

#title{     float: left;     margin-left: -1000000000000000px; } 

when remove float, came normal. replaced float position: fixed; , works fine!

thank tried help!


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -