1

Нужно сделать всю область кликабельной (при наведении), как display:block..пробовал padding, но он отодвигает border вниз, как режить проблему? Спасибо!

*это dropdown в правой части header'а. ..

jsfiddle.net/mL6octng/1/

1
  • 1
    Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. Commented 16 янв. 2022 в 16:39

2 ответа 2

2

Я обернул текст внутри ссылки в <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>

1
  • кажется подходит, спасибо за помощь!
    – ida
    Commented 16 янв. 2022 в 20:55
0

Может так? Сделал область клика шире и дропдаун завернул в дополнительную обертку, теперь нижняя граница не отодвигается.

.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>

Поскольку это дополнительная обертка, можете сдвигать ее насколько угодно, область с контактами все равно будет доступна.

2
  • Спасибо за ответ, но не так... Суть в том, что выпадашка есть только при наведении на "Contacts" ( inline or inline-block ), а когда "расширяю" область клика (что нужно) до лоя и хая header'а padding'ом, то паддинг отодвигает dotted border-bottom. Как сделать что-бы dotted border-bottom не отодвигался вниз и кликабельная область была шире, а не только при наведении на слово? Еще раз: padding расширяя область наведения отодвигает бордер нижний..Отодвижение бордера мне не нужно...
    – ida
    Commented 16 янв. 2022 в 17:35
  • спасибо, еще раз!
    – ida
    Commented 16 янв. 2022 в 20:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.