粘性導航欄<a>標簽</a>

Question

我是 html/css/JS 的新手，我為我的頁面制作了一個粘性導航欄，但我無法確定導航欄上我的標簽的可點擊區域的位置。 我知道如何在我的文本左側獲得可點擊區域而不是文本本身。 如果有人可以闡明我做錯了什么，那將是一個巨大的幫助。 謝謝！

<div class="page-navigation">
  <nav id="navbar">
    <div class="social">
      <img src="Images/facebook-logo.png" alt="facebook link" />
      <img src="Images/twitter-logo.png" alt="twitter link" />
      <img src="Images/linkedin-logo.png" alt="linkedin" />
    </div>
    <img
      src="Images/Logo-ADC%20Systems.png"
      class="logo"
      alt="Logo ADC Systems"
    />
    <ul id="menu">
      <li><a class="nav__links" href="index.html"></a>Home</li>
      <li><a class="nav__links" href="About%20us.html"></a>About Us</li>
      <li><a class="nav__links" href="Services.html"></a>Services</li>
      <li><a class="nav__links" href="Contact%20us.html"></a>Contact Us</li>
    </ul>
  </nav>

.home-navigation{
width: 100vw;
height: 100vh;
background-image: url("Images/Home-Background.jpg");
background-size: cover;
}

.page-navigation{
width: 100vw;
height: 80vh;
background-color: #2D3142;
background-size: cover;
}
.social{
float: right;
padding-right: 0.8rem
}
.social img{
width: 40px
}

nav{
position: relative;
z-index: 1;
Width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box
}

#navbar a {
float: left;
color:#2D3142;
text-align: center;
padding: 14px;
text-decoration: none;

}
.logo{
width: 300px;
margin: 5px 0;


}   
nav ul{
background: #FFFFFF;
width: 100%;
margin-top: 5px;    
}   
nav ul li{
position: relative;

display: inline-block;
list-style: none;
margin: 20px 30px;
color: #EF8354;
cursor: pointer;

}   


#navbar ul li:hover{
color:#2D3142;
transition: 0.3s ease-out;
}

nav.sticky{
position: sticky;
top: 0;
left: 0;
padding: 10px 8%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
transition: padding 1s;
}

nav.sticky ul{
width: auto;
}

Answer 1

看

<li><a class="nav__links" href="index.html"></a>Home</li>

它們應該是以下內容，注意Home在哪里，在鏈接內部而不是外部

<li><a class="nav__links" href="index.html">Home</a></li>