Demo Fiddle

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上我需要看 - image 1
页面menu1.php关于菜单2上的悬停效果 - 图像2
页面menu2.php - image 2
页面menu21.php - image 2

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

希望这是可以理解的。

Answer 1

主要的想法是分配你的每一个＆＃39; li＆＃39;元素一个类，并执行以下操作：

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

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

和其他菜单相同。

如果你想要一个更具体的答案，请先尝试自己解决这个问题并告诉我们你遇到了什么问题。就像apohl写的那样我们会帮你解决问题，但不能从头开始为你编写整个代码。

Answer 2

Demo Fiddle

（alternative sub menu style）

下面的内容将为您提供一个菜单本身的起点，然后您可以在您希望在给定的.php页面上显示的子菜单display:block;元素上将内联样式设置为ul。

HTML

<ul>
    <li>Menu 1
        <ul>
            <li>Menu 1-1</li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>Menu 2-1</li>
        </ul>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

CSS

body {
    margin: 0;
    padding: 0;
    font-family:arial;
    width:100%;
}
ul {
    list-style:none;
    background:#2E94C7;
    padding:10px;
    color:white;
}
}
body ul li {
    position:relative;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    padding:10px;
}
ul li ul {
    display:none;
    position:absolute;
    width:100%;
    background:black;
    margin:10px 0 0 -10px;
}
ul li ul li {
    display:block;
}
ul li:hover ul {
    display:block;
}

CSS子菜单悬停

2 个答案:

Demo Fiddle