css pseudo-class selector why not working on :focus div

Question

When the mouse hover on the menus,the menu items can show up,but I want to use "Tab" key to focus on the menu and the menu items can show up,but it doesn't work,how can I fix it?

Here's HTML

<ul class="hMenu">
        <li><a href="">prod1</a>
            <div>
                <a href="">test1</a>
                <a href="">test2</a>
                <a href="">test3</a>                    
            </div>
        </li>
        <li><a href="javascript:void(0);" >prod2</a>
            <div>                                               
                <a href="">test4</a>    
                <a href="">test5</a>                    
            </div>
        </li>    
    </ul>

Here's css:

ul.hMenu li:hover a { color:red;}           
        ul.hMenu li div table{  background-color:yellow;}    
        ul.hMenu  { 
            margin: 0;
            padding: 0; 
            z-index: 1;                 
        }
        ul.hMenu li  {  
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width:140px;
        }
        ul.hMenu li a { 
            display: block; 
            text-align: left;
            text-decoration: none
        }          
        ul.hMenu li div  {                    
            position: absolute;             
            display: none;                
        }
        ul.hMenu div a {background: yellow;     
        }
        ul.hMenu li :hover   {  background: yellow}
        /**Mouse hover the menus can show up**/
        ul.hMenu li:hover   div{            
            display:block;
        }
        /**Why this line can not work when the "Tab" to focus on the menu？**/
        ul.hMenu li :focus  div{            
            display:block;
        }

see if this may help you. http://stackoverflow.com/questions/3059203/tab-index-on-div — Mohammad Areeb Siddiqui, Jul 08 '13 at 09:50
do you want something like [this](http://jsfiddle.net/Ab2wd/)? — Chankey Pathak, Jul 08 '13 at 09:58

DreamWave · Answer 1 · 2013-07-08T10:03:57.910

3

If you have copied the code directly, what I see is that you have a space between your li and focus. Please remove the spaces between :hover or :focus and the previous element and try again.

Adding a space means you are referring to a descendant element which is not the case.

edited Jul 08 '13 at 10:03

answered Jul 08 '13 at 09:50

DreamWave

1,934
3
28
59

1

Not just _child_ elements, but all _descendant_ elements. – andyb Jul 08 '13 at 10:00
True, cant argue with that :) - fixed – DreamWave Jul 08 '13 at 10:02

score 0 · Answer 2 · answered Jul 08 '13 at 09:56

0

Try this,

ul.hMenu li:focus  div{            
    display:block;
}

And

ul.hMenu li:hover   {  background: yellow}

answered Jul 08 '13 at 09:56

Rohan Kumar

40,431
11
76
106

score 0 · Accepted Answer · answered Jul 08 '13 at 10:01

0

This should do it:

ul.hMenu li a:focus + div{            
        display:block;
    }

Example: Demo

And play around a bit with

 tabindex="myNumber"

in the appropriate html elements :)

answered Jul 08 '13 at 10:01

Lave Loos

1,252
1
11
15

Yes,It's working now，thanks very much. Now I want to change the menus as:"When the menu is focused and press the enter key then the menu items will show up,and press Tab to select the menu items,press ESC to hidden the menu items",how to change the css code? I find :visited,:active don't work when I press the enter key. – Harim Jul 09 '13 at 02:09
First of all: if an answer is working for you, mark it as solution (accepted answer). That way, other people having simular questions don't have to search that much :) About your new wishes: have a look at [this article](http://terrillthompson.com/blog/202) – Lave Loos Jul 09 '13 at 06:41
this is a typical solution but it doesn't actually address the problem. Why isn't :focus working without the use of a link or input ?? – roberto tomás Mar 18 '20 at 13:04

css pseudo-class selector why not working on :focus div

3 Answers3