Question

当我将鼠标悬停在导航栏上的菜单项上时，我试图将箭头旋转90度。

将鼠标悬停在导航栏菜单上时，当前会显示一个子菜单列表，但是我希望显示子菜单时箭头向下旋转。子菜单悬停可按我现在想要的方式工作，但是如果我将鼠标悬停在其上方，则只能使箭头旋转。我想将箭头旋转和子菜单显示绑在一起。

这是我的HTML：

<li>
    <a>
        <i class="fa fa-columns" aria-hidden="true"></i> 
        Admin
        <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </a>
    <ul>
        <li><a href="administrationsource.php"><i class="fa fa-globe" aria-hidden="true"></i> Source Admin</a></li>
        <li><a href="administrationservice.php"><i class="fa fa-inbox" aria-hidden="true"></i> Service Admin</a></li>
        <li><a href="administrationbulkservice.php"><i class="fa fa-clipboard" aria-hidden="true"></i> Bulk Services</a></li>
    </ul>
 </li>

这是我的CSS：

    nav li:hover > ul
    {
        display: block;
    }

    nav i:hover
    {
        transform: rotate(90deg);
    }

我还应该注意，我现在拥有的方式现在会旋转所有其他菜单图标。感谢您的任何帮助，谢谢！

将鼠标悬停在菜单链接上时旋转箭头

0 个答案: