CSS子菜单悬停

Question

我有以下菜单:

<ul>
<li><a href="menu1.php">Menu 1</a></li>    
<li><a href="menu2.php">Menu 2</a>
    <ul>
        <li><a href="menu21.php">Menu 2 - 1</a></li>
        <li><a href="menu22.php">Menu 2 - 2</a></li>
    </ul>
</li>
<li><a href="menu3.php">Menu 3</a>
    <ul>
        <li><a href="menu31.php">Menu 3 - 1</a></li>
        <li><a href="menu32.php">Menu 3 - 2</a></li>
        <li><a href="menu33.php">Menu 3 - 3</a></li>
    </ul>
</li>
<li><a href="menu4.php">Menu 4</a>
    <ul>
        <li><a href="menu41.php">Menu 4 - 1</a></li>

    </ul>
</li>

image with result

• 我需要在 menu1.php 页面上查看 - 图片 1
• On page menu1.php on hover effect on Menu 2 - image 2
• 在页面 menu2.php - 图片 2 上
• 页面 menu21.php - 图片 2

所以在页面上我需要看到这个页面的子菜单，并且用鼠标在其他链接上将这个子菜单更改为页面的子菜单，鼠标在该页面上。

希望这是可以理解的。

Answer 1

主要思想是为每个“li”元素分配一个类，并执行以下操作:

.classForLi1
{
  /*some properties for the menu*/
}

.classForLi1:hover
{
  /*some properties for the menu when hovered */
}

其他菜单也一样。

如果你想要一个更具体的答案，请先尝试自己解决这个问题，然后告诉我们你在哪里遇到困难。就像 apohl 写的那样，我们会帮助你解决问题，但不会从头开始为你编写整个代码。