Выделение меню с отступами с использованием элементов списка в вертикальной панели навигации

Question

Я создал фиксированную вертикальную навигационную панель слева от моего сайта, которая включает несколько подстраниц с отступом в меню. Я просто использую неупорядоченный список basi c для меню. Мне бы хотелось, чтобы цвета подсветки Active и Hover были равны go по всей ширине панели навигации. Но, как я сейчас это настроил, отступы в подменю Active и Hover имеют такую ​​же ширину, как и элементы List, которые их содержат. Есть ли способ сделать так, чтобы цвета подсветки подменю с отступами были равны полной ширине панели навигации?

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, поэтому мы можем растянуть его из стороны в сторону. Добавьте position: relative к #navmenu.

• Правило наведения для воздействия на элемент списка, а не a: ul#navmenu li:hover, ul#navmenu li:hover::before & ul#navmenu li:hover a

• Элемент a должен всегда находиться сверху псевдоэлемента (position: relative, z-index: 0), а color должен быть white при наведении.

• Псевдоэлемент (::before) должен иметь значения left и right 0, поэтому он будет растягиваться из стороны в сторону и фиксированной высоты 30px как a (вы можете извлечь его в переменную CSS).

См. комментарии в стиле:

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: 0;
    
  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>