Как покрыть всю ширину кнопки при наведении в html css

Кнопка без наведения:

Как покрыть всю ширину кнопки при наведении в html css

Кнопка при наведении:

Как покрыть всю ширину кнопки при наведении в html css

Я начал кодировать веб-сайт, но остался с некоторыми ошибками стиля. Как я могу закрыть ту часть, которая остается на кнопке, пока парящий. Каждый раз, когда я нахожу указатель, эта часть остается неизменной.

Код HTML для этой кнопки (полное меню):

<!DOCTYPE html>
<html>

<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" type = "text/css" href = "Vendor/css/normalize.css">
  <link rel = "stylesheet" type = "text/css" href = "Vendor/css/grid.css">
  <link rel = "stylesheet" type = "text/css" href = "vendor/css/generic.css" />
  <link rel = "stylesheet" type = "text/css" href = "Resources/css/styles.css">
  <link href = "https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel = "stylesheet">
  <link rel = "stylesheet" type = "text/css" href = "vendor/css/js-image-slider.css">
  <link href = "https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel = "stylesheet" type = "text/css">
  <title>Homepage</title>
  <link rel = "apple-touch-icon" sizes = "180x180" href = "/resources/favicons/apple-touch-icon.png">
  <link rel = "icon" type = "image/png" sizes = "32x32" href = "/resources/favicons/favicon-32x32.png">
  <link rel = "icon" type = "image/png" sizes = "16x16" href = "/resources/favicons/favicon-16x16.png">
  <link rel = "manifest" href = "/resources/favicons/site.webmanifest">
  <link rel = "mask-icon" href = "/resources/favicons/safari-pinned-tab.svg" color = "#5bbad5">
  <link rel = "shortcut icon" href = "/resources/favicons/favicon.ico">
  <meta name = "msapplication-TileColor" content = "#da532c">
  <meta name = "msapplication-config" content = "/resources/favicons/browserconfig.xml">
  <meta name = "theme-color" content = "#ffffff">
</head>

<body>
  <header>
    <!-- *******************************-->
    <!--         First ROW MENU         -->
    <!-- *******************************-->
    <nav>
      <div class = "main-nav">
        <ul class = "row">
          <li class = "btn"><a href = "http://onourem.com/onourem-ambassador-funship.html" target = "_blank">funship program details</a></li>
          <li class = "btn"><a href = "resources/pdf/alumnimeet2018.pdf" target = "_blank">alumni &amp; fairwell meet-2018</a></li>
          <li class = "btn"><a href = "resources/img/add30102017.jpg">requirment: faculty/other staff</a></li>
          <li class = "btn"><a href = "resources/pdf/information_brochure.pdf" target = "_blank">information brochure</a></li>
          <li class = "btn"><a href = "resources/pdf/admission_form.pdf" target = "_blank">download form</a></li>
          <li class = "btn"><a href = "#">student grievance</a></li>
        </ul>
      </div>
    </nav>

Код CSS для этой кнопки (полное меню):

/*=================================Common=================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #f0f0f0;
  color: #555;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

p {
  font-weight: 500;
}


/*========================resuable=============*/

.row {
  max-width: 1140px;
  margin: 0 auto;
}

section {
  padding: 15px 0;
}

.box {
  padding: 1%;
}

.list-item a:link,
.list-item a:visited {
  text-decoration: none;
  transition: color 0.2s;
}

.list-item a:hover,
.list-item a:active {
  color: #4285f4;
}


/*==============================Heading====================*/

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: 1px;
}

h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 150%;
  word-spacing: 4px;
}

h2 {
  font-size: 180%;
  word-spacing: 2px;
  text-align: center;
  margin-bottom: 25px;
}

h3 {
  font-size: 80%;
  margin-bottom: 15px;
}


/*====================Button=========================*/

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
  background-color: rgba(204, 204, 204, 0.24);
}


/*==============================main-nav====================*/

.main-nav {
  background-color: #535353;
  border-bottom: 1px solid #393939;
}

.main-nav ul li {
  list-style: none;
  display: inline-block;
  text-transform: uppercase;
  border-right: 1px solid #929292;
  font-size: 50%;
  padding: 10px;
}

.main-nav li a {
  text-decoration: none;
  color: #fff;
}

Спасибо за помощь в продвижении

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
213
1

Ответы 1

Это из-за символов новой строки, когда вы используете встроенный блок, добавьте font-size: 0 в ul и font-size: 12px в li, чтобы решить проблему.

/*=================================Common=================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #f0f0f0;
  color: #555;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

p {
  font-weight: 500;
}


/*========================resuable=============*/

.row {
  max-width: 1140px;
  margin: 0 auto;
  font-size: 0;
}

section {
  padding: 15px 0;
}

.box {
  padding: 1%;
}

.list-item a:link,
.list-item a:visited {
  text-decoration: none;
  transition: color 0.2s;
}

.list-item a:hover,
.list-item a:active {
  color: #4285f4;
}


/*==============================Heading====================*/

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: 1px;
}

h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 150%;
  word-spacing: 4px;
}

h2 {
  font-size: 180%;
  word-spacing: 2px;
  text-align: center;
  margin-bottom: 25px;
}

h3 {
  font-size: 80%;
  margin-bottom: 15px;
}


/*====================Button=========================*/

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
  background-color: rgba(204, 204, 204, 0.24);
}


/*==============================main-nav====================*/

.main-nav {
  background-color: #535353;
  border-bottom: 1px solid #393939;
}

.main-nav ul li {
  list-style: none;
  display: inline-block;
  text-transform: uppercase;
  border-right: 1px solid #929292;
  font-size: 50%;
  padding: 10px;
  font-size: 12px;
}

.main-nav li a {
  text-decoration: none;
  color: #fff;
}
<!DOCTYPE html>
<html>

<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" type = "text/css" href = "Vendor/css/normalize.css">
  <link rel = "stylesheet" type = "text/css" href = "Vendor/css/grid.css">
  <link rel = "stylesheet" type = "text/css" href = "vendor/css/generic.css" />
  <link rel = "stylesheet" type = "text/css" href = "Resources/css/styles.css">
  <link href = "https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel = "stylesheet">
  <link rel = "stylesheet" type = "text/css" href = "vendor/css/js-image-slider.css">
  <link href = "https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel = "stylesheet" type = "text/css">
  <title>Homepage</title>
  <link rel = "apple-touch-icon" sizes = "180x180" href = "/resources/favicons/apple-touch-icon.png">
  <link rel = "icon" type = "image/png" sizes = "32x32" href = "/resources/favicons/favicon-32x32.png">
  <link rel = "icon" type = "image/png" sizes = "16x16" href = "/resources/favicons/favicon-16x16.png">
  <link rel = "manifest" href = "/resources/favicons/site.webmanifest">
  <link rel = "mask-icon" href = "/resources/favicons/safari-pinned-tab.svg" color = "#5bbad5">
  <link rel = "shortcut icon" href = "/resources/favicons/favicon.ico">
  <meta name = "msapplication-TileColor" content = "#da532c">
  <meta name = "msapplication-config" content = "/resources/favicons/browserconfig.xml">
  <meta name = "theme-color" content = "#ffffff">
</head>

<body>
  <header>
    <!-- *******************************-->
    <!--         First ROW MENU         -->
    <!-- *******************************-->
    <nav>
      <div class = "main-nav">
        <ul class = "row">
          <li class = "btn"><a href = "http://onourem.com/onourem-ambassador-funship.html" target = "_blank">funship program details</a></li>
          <li class = "btn"><a href = "resources/pdf/alumnimeet2018.pdf" target = "_blank">alumni &amp; fairwell meet-2018</a></li>
          <li class = "btn"><a href = "resources/img/add30102017.jpg">requirment: faculty/other staff</a></li>
          <li class = "btn"><a href = "resources/pdf/information_brochure.pdf" target = "_blank">information brochure</a></li>
          <li class = "btn"><a href = "resources/pdf/admission_form.pdf" target = "_blank">download form</a></li>
          <li class = "btn"><a href = "#">student grievance</a></li>
        </ul>
      </div>
    </nav>

Другие вопросы по теме