Блог

Главная - Вопросы по программированию - Наведение курсора на кнопку навигационной панели не закрывает

Наведение курсора на кнопку навигационной панели не закрывает

#html #css

#HTML #css

Вопрос:

введите описание изображения здесьМоя кнопка навигационной панели для регистрации не покрывает всю строку. Кто-нибудь может показать мне, как это изменить?

мои коды приведены ниже

 <header>
  <div>
    <nav>
      <ul class="nav-menu">
        <li><a href="#home" class="nav-links">Home</a></li>
        <li><a href="#multipledemos" class="nav-links">Multiple Demos</a></li>
        <li><a href="#blogdemos" class="nav-links">Blog Demos</a></li>
        <li><a href="#signup" class="nav-links nav-links-btn">SignUp</a></li>
      </ul>
    </nav>
  </div>
</header>    
 
 .nav-links-btn {
  border: 0;
  padding: 0;
  border-radius: 0;
  color: white;
  transition: all 0.4s ease-out;
}

.nav-links-btn:hover {
  border: 0;
  padding: 0;
  background-color: rgb(198, 137, 255);
  color: white;
  transition: all 0.4s ease-out;
}

Комментарии:

1. Возможно, вы захотите добавить свой HTML

Ответ №1:

Предоставленный код представляет собой просто <ul> компоненты и не включает его родительский контейнер, поэтому без этого невозможно найти жизнеспособное решение.

Однако, основываясь на вашем скриншоте, я бы добавил следующее к вашему CSS.

 .nav-menu li a {
   width: 100%;
}

Вы должны установить ширину на 100%, которая сообщает дочерним элементам, в данном случае <ul> компонентам, охватывать всю ширину родительского элемента.

Метки: ,