使用垂直导航栏中的列表项突出显示缩进菜单

Question

我在网站的左侧创建了一个固定的垂直导航栏，其中包含几个子页面，并在菜单中缩进。我只是为菜单使用一个基本的无序列表。我希望“活动”和“悬停”突出显示颜色都可以贯穿导航栏的整个宽度。但是我现在设置的方式，缩进的子菜单“活动”和“悬停”颜色仅与包含它们的“列表项”一样宽。有没有一种方法可以使缩进的子菜单的突出显示颜色变为导航栏的整个宽度？

ul {
  margin-left: 46px;
}

li {
  color: #3BCBF6;
  list-style-type: none;
  font-family: sans-serif;
  font-size: 18px;
}


/* margin-left: 46px; indenets the 'MIP Data Sets' menu */

ul#navmenu {
  background-color: #00101E;
  margin: 0px;
  width: 300px;
  padding-left: 0px;
  list-style-type: none;
  /* removes bullets */
}

ul#navmenu li {
  text-align: left;
  padding-left: 0px;
  color: #3BCBF6;
  list-style-type: none;
  font-family: sans-serif;
}

ul#navmenu li a {
  display: block;
  width: 300px;
  padding-left: 25px;
  color: #3BCBF6;
  height: 30px;
  border: none;
  text-align: left;
  line-height: 30px;
  text-decoration: none;
}

ul#navmenu li a:hover {
  background-color: #083B4A;
  color: white;
  padding-left: 25px;
}


/* up state menu text color in ul#navmenu li a:  #3BCBF6 (aqua) */

body#page1 li#link1 a,
body#page2 li#link2 a,
body#page3 li#link3 a,
body#page4 li#link4 a,
body#page5 li#link5 a,
body#page6 li#link6 a,
body#page7 li#link7 a,
body#page8 li#link8 a {
  background-color: #3140b2;
  color: white;
  padding-left: 25px;
}

#footer {
  position: relative;
  height: 0px;
  margin-left: 0px;
  max-width: 1500px;
}

</style>

<div id="sidebar">
  <ul id="navmenu">
    <li id="link1"><a href="page1.html">Home</a></li>
    <li id="link2"><a href="page2.html">Data Service Catalog</a></li>
    <li id="link3"><a href="page3.html">Platforms</a></li>
    <ul>
      <li>MIP Data Sets</li>
    </ul>
    <ul>
      <li id="link4"><a href="page4.html">M2 Data</a></li>
      <li id="link5"><a href="page5.html">MDR Data</a></li>
      <li id="link6"><a href="page6.html">COHORT Data</a></li>
      <li id="link7"><a href="page7.html">HSDW Data</a></li>
    </ul>
    <li id="link8"><a href="page8.html">CarePoint</a></li>
  </ul>
</div>

Answer 1

由于您知道每个项目的高度（30px），因此可以在背景中添加绝对定位的伪元素（::before）。

伪元素定位上下文为ul#navmenu，因此我们可以左右拉伸它。我们还需要悬停规则来影响列表项，而不是a。

查看样式的注释：

ul {
  margin-left: 46px;
  list-style: inside;
}

li {
  color: #3BCBF6;
  list-style-type: none;
  font-family: sans-serif;
  font-size: 18px;
}

ul#navmenu {
  position: relative; /** this makes it the posioning context for the pseudo-element **/
  
  background-color: #00101E;
  margin: 0px;
  width: 300px;
  padding-left: 0px;
  list-style-type: none;
}

ul#navmenu li {
  text-align: left;
  padding-left: 0px;
  color: #3BCBF6;
  list-style-type: none;
  font-family: sans-serif;
}

ul#navmenu li a {
  /** position the link above the pseudo-element **/
  position: relative;
  z-index: 1;
    
  display: block;
  width: 300px;
  padding-left: 25px;
  color: #3BCBF6;
  height: 30px;
  border: none;
  text-align: left;
  line-height: 30px;
  text-decoration: none;
}

ul#navmenu li:hover {
  padding-left: 25px;
  /** all other styles are moved to the a or the ::before **/
}

/** the background pseudo-element **/
ul#navmenu li:hover::before {
  position: absolute;
  right: 0;
  left: 0;
  background-color: #083B4A;
  height: 30px;
  content: '';
}

ul#navmenu li:hover a {
  color: white; /** color the link **/
}

body#page1 li#link1 a,
body#page2 li#link2 a,
body#page3 li#link3 a,
body#page4 li#link4 a,
body#page5 li#link5 a,
body#page6 li#link6 a,
body#page7 li#link7 a,
body#page8 li#link8 a {
  background-color: #3140b2;
  color: white;
  padding-left: 25px;
}

#footer {
  position: relative;
  height: 0px;
  margin-left: 0px;
  max-width: 1500px;
}

</style>

<div id="sidebar">
  <ul id="navmenu">
    <li id="link1"><a href="page1.html">Home</a></li>
    <li id="link2"><a href="page2.html">Data Service Catalog</a></li>
    <li id="link3"><a href="page3.html">Platforms</a></li>
    <ul>
      <li>MIP Data Sets</li>
    </ul>
    <ul>
      <li id="link4"><a href="page4.html">M2 Data</a></li>
      <li id="link5"><a href="page5.html">MDR Data</a></li>
      <li id="link6"><a href="page6.html">COHORT Data</a></li>
      <li id="link7"><a href="page7.html">HSDW Data</a></li>
    </ul>
    <li id="link8"><a href="page8.html">CarePoint</a></li>
  </ul>
</div>