Why li:focus is not working on display or visibility?

Question

I can not get li:focus to show ul that is inside it.

Here is https://jsfiddle.net/cgxwzdy0/10/ with css display property

and the other one with visibility property https://jsfiddle.net/cgxwzdy0/12/.

<div id="menu">
  <ul>
    <li>
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Css:

#menu ul li > ul {
  display: none;
}
#menu ul li li:focus > ul {
  display: block !important;
}

Or with visibility:

Css

#menu ul li > ul {
  visibility: hidden;
}
#menu ul li li:focus > ul {
  visibility: visible !important;
}

Please no javascript solutions. And if this not possible with css, please can you explain why?

When i turn on Developer tools and choose :focus menu is shown. Take a look at image.

You cannot normally focus `li` elements. But you can hover them, so you should use `li:hover` instead of `li li:focus`. — str, Aug 27 '18 at 15:18
Primarily: there is a typo in the selector. You got two times `li`. Should be `#menu ul li:focus > ul`. But also, `:focus` is for keyboard focus (tab). Do you actually mean `:hover`, which responds to move hovering? — GolezTrol, Aug 27 '18 at 15:18
You are hiding the UL by default. How do you expect it to capture anything? — ZorgoZ, Aug 27 '18 at 15:20
@ZorgoZ OP not trying to capture anything with the hidden UL — Huangism, Aug 27 '18 at 15:21
@Huangism you might not want to, but your `:focus` is targeting the second level of LI-s, which is inside the hidden UL. — ZorgoZ, Aug 27 '18 at 15:24
@pregmatch Then either use `tabindex` as mentioned in the answer or use [`:target`](https://developer.mozilla.org/en-US/docs/Web/CSS/:target). — str, Aug 27 '18 at 15:25
i've posted a other answer which uses `:active` and `:hover` (hover is used to keep to prevent the menu from folding) which does not require hacks — Raymond Nijland, Aug 27 '18 at 17:25

Temani Afif · Accepted Answer · 2018-08-27T15:30:45.903

To be able to focus the element you need to consider tabindex attribute but there is another issue with the a element inside will block the focus effect.

Here is an example where you can focus when you click outside the text and not when clicking on the text:

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li:focus > ul {
  display: block;
}

<div id="menu">
  <ul>
    <li tabindex="-1">
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).^ref

To make it work with a element you can consider :target

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li #sub-menu:target {
  display: block;
}

<div id="menu">
  <ul>
    <li>
      <a href="#sub-menu">
      Lalalalal
      </a>
      <ul id="sub-menu">
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.^ref

it does not work when the test is clicked which most internet users do @pregmatch — Raymond Nijland, Aug 27 '18 at 15:25
"that's what I also explained" i know, i wanted it to make it more clear to @pregmatch — Raymond Nijland, Aug 27 '18 at 15:27
i upvoted for finding these methodes but both methods are pretty hackie. First method does not work when clicking on the text which can be a large area when using a small menu item.. Second method also messes up the browser history and no easy method to fold back the menu.. For future readers read mine answer https://stackoverflow.com/a/52044043/2548147 which does not have these limit factors. — Raymond Nijland, Aug 27 '18 at 17:39

Raymond Nijland · Answer 2 · 2018-08-27T17:36:19.010

Also a trick can be to use :active and :hover in combination with position absolute and relative.
So the menu does not fold back after clicking it but fold when the :hover is lost

#menu ul li {
  
  position: relative;  
}

#menu ul li ul {

   position: absolute; 
   top: 0px;
   left: 0px;
   padding: 20px;
   
   width: 100%;
   height: 100%;
  
   display: none;
   visibility: hidden;
}

#menu ul li:active > ul{
  
   display: block;
   visibility: visible;  
}

#menu ul li ul:hover {
 
   display: block;
   visibility: visible; 
}

<div id="menu">
  <ul>
    <li tabindex="-1">
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

see a demo here https://jsfiddle.net/cgxwzdy0/242/

This demo contains colors so you can see what is happening and why it works https://jsfiddle.net/cgxwzdy0/244/

Why li:focus is not working on display or visibility?

2 Answers2