0

マウスをメニューの上に置くと、メニュー項目が表示されることがありますが、「Tab」キーを使用してメニューにフォーカスしたいのですが、メニュー項目が表示されますが、機能しません。どうすれば修正できますか?

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>

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;
        }
4

3 に答える 3

3

コードを直接コピーした場合、li と focus の間にスペースがあることがわかります。:hover または :focus と前の要素の間のスペースを削除して、もう一度お試しください。

スペースを追加すると、そうでない子孫要素を参照していることを意味します。

于 2013-07-08T09:50:52.550 に答える
0

これはそれを行う必要があります：

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

例:デモ

そして、少し遊んでください

 tabindex="myNumber"

適切なhtml要素で:)

于 2013-07-08T10:01:13.250 に答える
0

これを試して、

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

と

ul.hMenu li:hover   {  background: yellow}
于 2013-07-08T09:56:34.203 に答える