Как выбрать два элемента?CSS

Question

Я строю навигацию, и внутри моего ul списка есть еще один подсписок:

    <ul>
        <li><a href="recipe.html">Cooking</a>
            <ul>
                <li><a href="recipe.html">Fantasy</a></li>
                <li><a href="recipe.html">Meal</a></li>
                <li><a href="recipe.html">Difficulty</a></li>
            </ul>
        </li>
        <li>other li</li>
     </ul>

Я в основном хочу, чтобы каждый раз, когда я наводил курсор на различные элементы li(fantasy-food-затруднение) появляется значок внизу списка ul.

Я использую ul::after для размещения этих значков.Единственная проблема заключается в том, что они должны меняться при наведении другого li.

Как их выбрать?

Есть ли способ выбрать ul::after + li:nth-child(1)?

Кроме того, я не могу изменить свой HTMLпотому что я создаю тему для WordPress.

Answer 1

Я обновил вашу js fiddle для списка наведения: https://jsfiddle.net/txcbdu0f/2/

ul ul.menu {
 display: none;
}

ul > li:hover > ul.menu {
 display: block;
}

Надеюсь, вы ищете эту простую идею.

Answer 2

ищете что-то подобное?https://jsfiddle.net/txcbdu0f/1/

ul.menu li:after{
  content:"";
  width:10px;
  height:20px;
  display:inline-block;
  background:#ccc;
  position:absolute;
  bottom:-50px;
  left:0;
  opacity:0;
}
ul.menu li:hover:after{opacity:1;}
ul.menu li:first-child:hover:after{background:#000;}
ul.menu li:nth-child(2):hover:after{background:#ccc;}
ul.menu li:last-child:hover:after{background:red;}
ul.menu{position:relative;}