Why isnt my anchor tags not showing style on hover?-CodePudding

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 >
            <a href="#" id="brunch"><li>Brunch</li></a>
          </span>
          <span >
            <a href="#" id="bowls"><li>Bowls</li></a>
          </span>
          <span >
            <a href="#" id="beverages"> <li>Beverages</li></a>
          </span>
          <span >
            <a href="#" id="salads"> <li>Salads</li></a>
          </span>
          <span >
            <a href="#" id="desserts"> <li>Desserts</li></a>
          </span>
        </ul>

CodePudding user response：

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 > 
    <a href="#" id="brunch">Brunch</a>
  </li>
  <li > 
    <a href="#" id="bowls">Bowls</a>
  </li>
  ...
</ul>

CodePudding user response：

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

CodePudding user response：

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 >
              <a href="#" id="brunch">Brunch</a>
            </span>
          </li>
          <li>
          <span >
            <a href="#" id="bowls">Bowls</a>
          </span>
          </li>
          <li>
          <span >
            <a href="#" id="beverages">Beverages</a>
          </span>
          </li>
</ul>