Блог

Я изучаю CSS hover и menu, как вы можете видеть здесь

 document.getElementsByTagName("h1")[0].style.fontSize = "6vw";  

 $brandColor: darkorchid;
body {
  font-family: system-ui;
  background: linear-gradient(to bottom, $brandColor, darken($brandColor, 15%));
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.header {
  height: 100px;
  background-color: #252e38;
  display: flex;
}

.menu {
  margin: auto 0;
  border: thick #FFAA03;
}

.menu ul {
  list-style-type: none;
  display: inline-flex;
  /*display:inline-block;*/
}

.menu ul li {
  padding-right: 15px;
  color: white;
  /*padding-top: 25px;*/
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  /*margin-top: auto;
    margin-bottom: auto;*/
  padding-top: auto;
  padding-bottom: auto;
  /*    padding: 2px 10px;  /*newly added code*/
}

.menu ul li:hover {
  background-color: #0ab2d2;
  /*height: 100%;*/
  /*hover is not fully correct*/
  /*padding: 27px 7px;*/
  text-decoration: none;
}  

 <header class="header">
  <div class="logo">
    <!--<img src="images/logo.png" alt="logo"/>--></div>
  <div class="menu">
    <ul>
      <li class="3">Home</li>
      <li class="3">About Us</li>
      <li class="3">Blog</li>
      <li class="3">Contact</li>
    </ul>
  </div>
  <div class="socialIcon">

  </div>
  <div class="searchIcon">

  </div>
</header>  

Codepen:
https://codepen.io/Software_ss/pen/YzqmRMb

при наведении цвет фона меняется, но на небольшой размер.

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

 https://mofizuddin12.github.io/Nemo-ipsam-voluptatem-H.W/
  

Вместо padding-right: 15px; этого вы можете добавить отступы вокруг элемента с padding: 15px; помощью . padding-right это добавит 15px пространство только к правой внутренней стороне вашего поля элементов, но для получения желаемого эффекта вам нужно применить пространство вокруг вашего внутреннего поля.

Поэтому вместо

 .menu ul li{
   padding-right: 15px;
   /* rest of its style */
}
  

ваш код должен быть таким:

 .menu ul li{
   padding: 15px;
   /* rest of its style */
}
  

И его окончательная форма будет примерно такой:

 $brandColor: darkorchid;
body {
  font-family: system-ui;
  background: linear-gradient(to bottom, $brandColor, darken($brandColor, 15%));
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.header {
  height: 100px;
  background-color: #252e38;
  display: flex;
}

.menu {
  margin: auto 0;
  border: thick #FFAA03;
}

.menu ul {
  list-style-type: none;
  display: inline-flex;
}

.menu ul li {
  padding: 15px;
  color: white;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding-top: auto;
  padding-bottom: auto;
}

.menu ul li:hover {
  background-color: #0ab2d2;
  text-decoration: none;
}  

 <header class="header">
  <div class="menu">
    <ul>
      <li class="3">Home</li>
      <li class="3">About Us</li>
      <li class="3">Blog</li>
      <li class="3">Contact</li>
    </ul>
  </div>
</header>  

ПРИМЕЧАНИЕ: Вы можете прочитать больше о том, как padding это работает здесь.

Измените текущий .menu ul li на этот:

 .menu ul li{
    margin-right: 15px;
  padding: 10px 10px;
    color: white;
    /*padding-top: 25px;*/
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    /*margin-top: auto;
    margin-bottom: auto;*/
    padding-top: auto;
    padding-bottom: auto;
}
  

Что касается объяснения. Вместо используемого вами отступа вправо вы можете использовать отступ вправо, чтобы создать пространство за пределами элемента. Заполнение создает пространство внутри элемента. Чем больше отступов вы добавляете, тем больше становится фон при наведении.