1
내 드롭 다운 메뉴가 제대로 작동하지 않습니다. 커서를 메뉴 아래로 내려 가면 메뉴가 여러 번 위아래로 움직입니다. 왼쪽 상단에 마우스를 올려 놓습니다. img - 드롭 다운을 시작합니다.jQuery 드롭 다운 메뉴가있는 버그
$('.autoexcange__service').mouseenter(
function() {
$(this).find($('.autoexcange__menu')).slideDown(350);
});
$('.autoexcange__service').mouseleave(
function() {
$(this).find($('.autoexcange__menu')).slideUp('slow');
});.autoexcange {
height: 461px;
background-image: url("../img/des/mobile_top-block.png");
background-repeat: no-repeat;
margin-top: 56px;
margin-left: 9px;
position: relative;
width: 304px;
padding-top: 70px;
}
.autoexcange .autoexcange__header {
background-color: #FFF;
color: #666;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 1px;
line-height: 19px;
margin-left: 21px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -6px;
width: 260px;
}
.autoexcange .autoexcange__block {
margin-left: 7px;
height: 245px;
width: 293px;
background-image: url("../img/des/mobile__menu-block.png");
background-repeat: no-repeat;
}
.autoexcange .autoexcange__section {
position: relative;
margin: 0px auto;
width: 280px;
height: 70px;
margin-bottom: 10px;
}
.autoexcange .autoexcange__section .autoexcange__numbers {
float: left;
width: 90px;
font-family: "Open Sans", sans-serif;
font-weight: 800;
color: #666;
text-transform: uppercase;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__sell {
margin-top: 11px;
margin-left: 5px;
font-size: 11px;
letter-spacing: 0.7px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__sell--get {
margin-top: 14px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__price {
font-size: 20px;
margin-top: 13px;
margin-left: 3px;
}
.autoexcange .autoexcange__section .autoexcange__numbers .autoexcange__price--get {
margin-left: 5px;
margin-top: 13px;
}
.autoexcange .autoexcange__section .autoexcange__service {
position: absolute;
background-image: url("../img/svg/services--pm.svg");
background-size: 30px;
background-repeat: no-repeat;
padding-left: 50px;
top: 32px;
left: 99px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu {
display: none;
background-color: #FFF;
border: 1px solid #1469eb;
border-top: none;
width: 261px;
height: 153px;
position: absolute;
z-index: 1000;
top: 50px;
left: -92px;
background-image: url("../img/des/mobile__grid.png");
background-repeat: no-repeat;
background-position: 4px center;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item {
width: 82px;
height: 75px;
float: left;
background-image: url("../img/logos/btc.png");
background-position: 27px 11px;
background-repeat: no-repeat;
font-family: "Open Sans", sans-serif;
font-size: 13px;
color: #666;
text-align: center;
cursor: pointer;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item p {
margin-top: 50px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--2 {
background-image: url("../img/logos/pm.png");
background-position: 34px 11px;
width: 92px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--3 {
background-image: url("../img/logos/paymer.png");
background-position: 30px 9px;
width: 86px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--4 {
background-image: url("../img/logos/ok.png");
background-position: 19px 15px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--5 {
background-image: url("../img/logos/zp.png");
background-position: 35px 10px;
width: 92px;
}
.autoexcange .autoexcange__section .autoexcange__service .autoexcange__menu .autoexcange__item--6 {
background-image: url("../img/logos/pb24.png");
background-position: 34px 14px;
width: 86px;
}
.autoexcange .autoexcange__section .autoexcange__service--get {
background-image: url("../img/svg/services--pb.svg");
top: 30px;
}
.autoexcange .autoexcange__section .autoexcange__currency {
position: absolute;
font-family: "Open Sans", sans-serif;
font-size: 20px;
font-weight: 800;
color: #666;
top: 33px;
left: 197px;
}
.autoexcange .autoexcange__section .autoexcange__currency span {
padding-top: 3px;
display: block;
float: left;
}
.autoexcange .autoexcange__section .autoexcange__currency .autoexcange__dropdown img {
padding-left: 9px;
}
.autoexcange .autoexcange__section .autoexcange__currency--get {
top: 31px;
}
.autoexcange .autoexcange__dropdown img {
height: 23px;
padding-top: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="autoexcange">
<h2 class="autoexcange__header">АВТОМАТИЧЕСКИЙ ОБМЕН ЭЛЕКТРОННЫХ ВАЛЮТ</h2>
<div class="autoexcange__block">
<div class="autoexcange__section">
<div class="autoexcange__numbers">
<p class="autoexcange__sell">отдаете</p>
<p class="autoexcange__price">0,00.....</p>
</div>
<div class="autoexcange__service">
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
<div class="autoexcange__menu">
<div class="autoexcange__item">
<p>BTC-e</p>
</div>
<div class="autoexcange__item autoexcange__item--2">
<p>Perfect Money</p>
</div>
<div class="autoexcange__item autoexcange__item--3">
<p>Paymer</p>
</div>
<div class="autoexcange__item autoexcange__item--4">
<p>Okpay</p>
</div>
<div class="autoexcange__item autoexcange__item--5">
<p>Z-payement</p>
</div>
<div class="autoexcange__item autoexcange__item--6">
<p>Приват 24</p>
</div>
</div>
</div>
<div class="autoexcange__currency">
<span>USD</span>
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
</div>
<div class="autoexcange__section">
<div class="autoexcange__numbers">
<p class="autoexcange__sell autoexcange__sell--get">получаете</p>
<p class="autoexcange__price autoexcange__price--get">0,00.....</p>
</div>
<div class="autoexcange__service autoexcange__service--get">
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
<div class="autoexcange__currency autoexcange__currency--get">
<span>USD</span>
<a href="#" class="autoexcange__dropdown">
<img src="img/svg/mobile__down.svg" alt="">
</a>
</div>
</div>.autoexcange__service 내부 항목 사이에 격차가 있기 때문에 발생 http://codepen.io/ArkadiyS/pen/vKZGzA