These are the styles I am trying to apply on the li elements when I hover over the list items. But these styles don't appear as of now. What am I doing wrong?
#menu-ul a:hover {
border-bottom: 2px solid black;
}
#menu-ul a:focus {
border-bottom: 2px solid black;
}<ul id="menu-ul">
<span class="menu-item-selection">
<a href="#" id="brunch"><li>Brunch</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="bowls"><li>Bowls</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="beverages"> <li>Beverages</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="salads"> <li>Salads</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="desserts"> <li>Desserts</li></a>
</span>
</ul>Fist of all fix your structure: <span> can't be a child of <ul> element.
This should look like this:
<ul id="menu-ul">
<li class="menu-item-selection">
<a href="#" id="brunch">Brunch</a>
</li>
<li class="menu-item-selection">
<a href="#" id="bowls">Bowls</a>
</li>
...
</ul>
You should target the li element, and not the a element:
#menu-ul a:hover li{
border-bottom: 2px solid black;
}
#menu-ul a:focus li{
border-bottom: 2px solid black;
}
You can fix it with just targetting to li after a:hover but I would change html structure
#menu-ul a:hover {
border-bottom: 2px solid black;
}
#menu-ul a:focus {
border-bottom: 2px solid black;
} <ul id="menu-ul">
<li>
<span class="menu-item-selection">
<a href="#" id="brunch">Brunch</a>
</span>
</li>
<li>
<span class="menu-item-selection">
<a href="#" id="bowls">Bowls</a>
</span>
</li>
<li>
<span class="menu-item-selection">
<a href="#" id="beverages">Beverages</a>
</span>
</li>
</ul>