Нужно сделать всю область кликабельной (при наведении), как display:block..пробовал padding, но он отодвигает border вниз, как режить проблему? Спасибо!
*это dropdown в правой части header'а.
jsfiddle.net/mL6octng/1/
Нужно сделать всю область кликабельной (при наведении), как display:block..пробовал padding, но он отодвигает border вниз, как режить проблему? Спасибо!
*это dropdown в правой части header'а.
jsfiddle.net/mL6octng/1/
Я обернул текст внутри ссылки в <span>
, которому прописал только стиль с border
, теперь можно менять отступы у ссылки не опасаясь за смещение border
.
.contacts {
/*position: absolute;*/
right: 0;
top: 20px;
}
.contacts__link {
padding: 40px;
display: inline-block;
text-decoration: none;
font-size: 16px;
color: #33c1e3;
font-weight: bold;
}
.contacts__link span {
border-bottom: 2px dotted #33c1e3;
}
.dropdown {
position: absolute;
background-color: silver;
display: none;
width: 180px;
height: 200px;
}
.dropdown__item-link {
display: block;
}
.contacts:hover .dropdown {
display: block;
}
<div class="contacts">
<a class="contacts__link" href="#"><span>Contacts</span></a>
<ul class="dropdown">
<li class="dropdown__item">
<a href="" class="dropdown__item-link"><i class="fas fa-envelope"></i>[email protected]</a>
</li>
<li class="dropdown__item">
<a href="" class="dropdown__item-link"><i class="fas fa-phone-alt"></i>+380 546 5345</a>
</li>
<li class="dropdown__item">
<a href="" class="dropdown__item-link"><i class="fab fa-skype"></i>sample</a>
</li>
</ul>
Может так? Сделал область клика шире и дропдаун завернул в дополнительную обертку, теперь нижняя граница не отодвигается.
.contacts {
position: relative;
left: 0;
top: 20px;
}
.contacts__link {
display: block;
width: 180px;
text-decoration: none;
border-bottom: 2px dotted #000;
font-size: 16px ;
color: #000;
font-weight: bold;
background-color: gray;
}
.dropdown-box {
display: none;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 200px;
}
.dropdown {
background-color: silver;
width: auto;
height: 180px;
margin-top: 22px;
}
.dropdown__item-link {
display: block;
}
.contacts__link:hover ~ .dropdown-box {
display: block;
}
.dropdown-box:hover {
display: block;
}
<div class="contacts">
<a class="contacts__link" href="#">Contacts</a>
<div class="dropdown-box">
<ul class="dropdown">
<li class="dropdown__item">
<a href="" class="dropdown__item-link"
><i class="fas fa-envelope"></i>[email protected]</a
>
</li>
<li class="dropdown__item">
<a href="" class="dropdown__item-link"
><i class="fas fa-phone-alt"></i>+380 546 5345</a
>
</li>
<li class="dropdown__item">
<a href="" class="dropdown__item-link"
><i class="fab fa-skype"></i>sample</a
>
</li>
</ul>
</div>
Поскольку это дополнительная обертка, можете сдвигать ее насколько угодно, область с контактами все равно будет доступна.