How can I select a list inside a focused list item with CSS?-CodePudding

I want to do that if user focus "<li><a href="#">Kurumsal</a></li>", then opacity of ul that inside of li will be 1.

Like this: https://i.hizliresim.com/slkl93w.jpg Screenshot:

enter link description here

<ul>
  <li><a href="#">Kurumsal</a>
    <ul>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">Vizyon ve Misyon</a></li>
      <li><a href="#">Kurucumuz</a></li>
      <li><a href="#">Markalarımız</a></li>
      <li><a href="#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>
</ul>

CodePudding user response：

You can use focus and focus-within and if you want mouse interaction add in hover

ul ul {
  opacity: .2;
  transition: opacity .5s;
}

ul a:hover   ul, 
ul a:focus   ul, 
ul ul:hover,
ul ul:focus-within {
  opacity: 1;
  transition: opacity 1s;
}

<ul>
  <li><a href="#">Kurumsal</a>
    <ul>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">Vizyon ve Misyon</a></li>
      <li><a href="#">Kurucumuz</a></li>
      <li><a href="#">Markalarımız</a></li>
      <li><a href="#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>
  <li><a href="#">Kurumsal</a>
    <ul>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">Vizyon ve Misyon</a></li>
      <li><a href="#">Kurucumuz</a></li>
      <li><a href="#">Markalarımız</a></li>
      <li><a href="#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>  
</ul>