为什么我的悬停命令没有遍历整个条形?浅蓝色应该穿过整个条形，而不仅仅是那么多

Question

为什么我的悬停不穿过整个侧边栏？我需要侧边栏悬停以便能够穿过整个侧边栏，而不仅仅是那一点点。我将如何解决这个问题？

#main-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
font-family: sans-serif;
display: table-cell;
width: 3.7%;
vertical-align: top;
background-color: #0E4D92;
}
#sidebar a {
display: block;
padding: 10px;
color: rgba(255, 255, 255);
margin: 15px 30px 0 0;
text-decoration: none;
position: relative;
left: 30px;
}
#sidebar a:hover {
background-color: #73C2FB;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
padding: 10px 0 0 10px;
}

<div id="main-container">
<div id="sidebar">
<img src="img/LetterLogo.png" />
<a href="index.html">Home</a>
<a href="about.html">Order</a>
<a href="#">Portfolio</a>
<a href="#">History</a>
<a href="#"></a>
</div>
</div>

Answer 1

该问题是由您创建#sidebar a索引的方式引起的 - 将left: 30px与position: relative一起使用。删除两者，并改用padding: 10px 10px 10px 40px;。这样，背景将从左边缘开始，文本仍将向内缩进。

#main-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
font-family: sans-serif;
display: table-cell;
width: 3.7%;
vertical-align: top;
background-color: #0E4D92;
}
#sidebar a {
display: block;
padding: 10px 10px 10px 40px;
color: rgba(255, 255, 255);
margin: 15px 30px 0 0;
text-decoration: none;
}
#sidebar a:hover {
background-color: #73C2FB;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
padding: 10px 0 0 10px;
}

<div id="main-container">
<div id="sidebar">
<img src="img/LetterLogo.png" />
<a href="index.html">Home</a>
<a href="about.html">Order</a>
<a href="#">Portfolio</a>
<a href="#">History</a>
<a href="#"></a>
</div>
</div>