Question

我正在构建一个位于页面左侧的垂直导航。并且导航通过悬停调用子菜单。但这里的问题是我想建立这个导航可能通过TAB 响应。

我得到的情况是当我将鼠标悬停在导航栏上时，子菜单会缓和。但是我想使用Tab来关注主菜单，然后子菜单也会放松。但它没有用。

是否可以使用HTML和CSS ???

示例：https://www.whitehouse.gov/

这是我的HTML代码：

                <nav id="menu"> 
                <ul class="parent-menu">   
                <li >
                <a href="#" tabindex="1" >Home & Kitchen</a>
                <ul> 
                <li><a href="#" tabindex="2">item</a></li>
                <li><a href="#" tabindex="3">item</a></li> 
                <li><a href="#" tabindex="4">item</a></li> 
                <li><a href="#" tabindex="5">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li tabindex="2">
                <a href="#" >Electronics</a> 
                <ul> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li tabindex="3">
                <a href="#" >Clothing</a>
                <ul> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li>
                <a href="#">Cars & Motorbikes</a> 
                <ul> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                </ul> 
                </li> 

                <li>
                <a href="#">Books</a> 
                <ul> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                </ul> 
                </li>

                <li>
                <a href="#">Support</a> 
                <ul> 
                <li>
                <a href="#">Contact Us</a>
                </li> 
                <li><a href="#">Forum</a>
                </li> 
                <li><a href="#">Deliveries</a></li>
                <li><a href="#">T&C</a></li> 
                </ul>
                </li> 
        </ul> 
    </nav>

这是我的CSS代码：

p, ul, li, div, nav { padding:0; margin:0; }
 #menu { 
 overflow: auto; 
 position:fixed; 
 left:0%;top:20%; 
z-index:2; }
.parent-menu { 
background-color: #0c8fff; 
min-width:200px; 
float:left; }
#menu ul { 
list-style-type:none; 
} 
#menu ul li a {
 padding:10px 15px; 
 display:block; 
 color:#fff; 
 text-decoration:none; 
 } 
#menu ul li a:hover { 
background-color:#007ee9; 
    }
#menu ul li:hover  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 
#menu ul li:focus  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in; 
} 
#menu ul li > ul { 
position: fixed; 
background-color: #333; 
top: 20%; left: -200px; 
min-width: 200px; 
z-index: -1; 
height: 100%; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
}
#menu ul li > ul li a:hover { 
background-color:#2e2e2e; 
}

这是我觉得棘手的地方。这里的悬停工作正常。但是当谈到焦点时，它并没有起作用。

#menu ul li:hover  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 
#menu ul li:focus  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in; 
}

希望你们能理解我在说什么：）

Answer 1

您可以在不使用tabindex的情况下使用，如下所示：

#menu ul li a:focus + ul {
 left: 200px; 
 -webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
 -ms-transition: left 200ms ease-in;
 transition: left 200ms ease-in; 
}

谢谢这个小提琴https://jsfiddle.net/toz7n3ym/1/）

OR 从a中删除href，当你使用href时它会关注＆lt; a＆gt;不在＆lt; li> 检查这个小提琴https://jsfiddle.net/toz7n3ym/

tabindex专注于使用CSS调用子菜单

1 个答案: