CSS selector: applying :focus on navbar - html

Question

Following with ADA-compliant, I need to make the navbar expand either when the user's mouse is over at the navbar (using :hover) or if the user's mouse is focused on one of the items in the navbar.
Although I was able to figure it the first part, I am having trouble implementing the second requirement.
Here's a code snippet to demonstrate my current implementation:
https://codepen.io/neotriz/pen/MoBMvz?editors=1100
CSS:
.nav-template {
height: 100%;
position: absolute;
transition: width 0.3s linear;
display: flex;
overflow: hidden;
background: black;
width: 70px;
&:hover{
width: 150px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.12);
}
a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
}
}
}
}
It looks like if I apply &:focus where &:hover is, it doesn't work because it is thinking the entire navbar needs to be selected in order to expand it, as suppose to focusing on each individual items.
Is my current implementation needs some reworking?

Answer 1

Try Some thing Like this
HTML
<div tabindex="1" class="nav-template">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
LESS
.nav-template {
height: 100%;
position: absolute;
display: flex;
overflow: hidden;
background: black;
ul {
list-style-type: none;
margin: 0;
padding: 0;
transition: width 0.3s linear;
li {
margin: 0;
padding: 0;
cursor: pointer;
a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
width:70px;
transition:all ease 0.5s;
&:focus,&:hover {
width: 100px;
background-color: rgba(255, 255, 255, 0.12);
}
}
}
}
}
CSS
.nav-template {
height: 100%;
position: absolute;
display: flex;
overflow: hidden;
background: black;
}
.nav-template ul {
list-style-type: none;
margin: 0;
padding: 0;
transition: width 0.3s linear;
}
.nav-template ul li {
margin: 0;
padding: 0;
cursor: pointer;
}
.nav-template ul li a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
width:70px;
transition:all ease 0.5s;
}
.nav-template ul li a:focus,
.nav-template ul li a:hover {
width: 100px;
background-color: rgba(255, 255, 255, 0.12);
}
use :focus on the anchor tag increase its width, :focus works on div but the problem here is when you are focusing it is directly focused on the anchor tag but not on the div or the li or ul
add these rules for transition
.nav-template ul li a{
width:70px;
transition:all ease 0.5s;
}
Link For reference
give this a try
hope this helps...