Estos son los estilos que trato de aplicar en los elementos li cuando paso el mouse sobre los elementos de la lista. Pero estos estilos no aparecen a partir de ahora. ¿Qué estoy haciendo mal?
#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>En primer lugar, arregle su estructura: <span> no puede ser un elemento secundario del elemento <ul> . Esto debería verse así:
<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>Debe apuntar al elemento li, y no al elemento a:
#menu-ul a:hover li{ border-bottom: 2px solid black; } #menu-ul a:focus li{ border-bottom: 2px solid black; }Puede solucionarlo con solo apuntar a li después a:hover , pero cambiaría la estructura html
#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>