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元素上时（幻想进餐难度），就会在ul列表底部显示一个图标。

我正在使用ul::after放置这些图标。唯一的问题是，当将鼠标悬停在其他li上时，它们应该更改。

我应该如何选择它们？

是否可以选择ul::after + li:nth-child(1)？

此外，我无法修改HTML，因为我正在为WordPress构建主题。

Answer 1

寻找这样的东西？ 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;}

Answer 2

我已将您的js小提琴更新为悬停列表： https://jsfiddle.net/txcbdu0f/2/

ul ul.menu {
 display: none;
}

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

希望您正在寻找这个简单的主意。

如何选择两个元素？的CSS

2 个答案: