Кнопка без наведения:
Кнопка при наведении :
Я начал кодировать веб-сайт, но у меня остались некоторые ошибки в стиле.
Как я могу покрыть ту часть, оставленную на кнопке, пока зависает . Каждый раз, когда я парю, эта часть не найдена.
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/ionicons@4.3.0/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 & 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;
}
спасибо за помощь заранее