Drop down menu 带有子菜单的CSS Verticla菜单

我一直在使用CSS制作垂直菜单

当用户将鼠标悬停在顶部菜单上时，所有子菜单应垂直显示为父菜单。我尝试复制的示例就是此网站上使用的示例：

以下是我编写的HTML代码块：

 <!-- divPgContent STARTS -->
 <div id="divPgContent" style="height:200px;">

<!-- divTopMenu1 STARTS -->
<div id="divTopMenu1">

    <ul id="topmenu1" class="menu">
        <li class="current active"><a href="/">Home</a></li>
        <li><a target="_blank" href="#">Menu 2</a></li>
        <li><a target="_blank" href="#">Menu 3</a></li>
        <li><a target="_blank" href="#">Menu 4</a></li>
        <li><a target="_blank" href="#">Menu 5</a></li>
        <li><a href="javascript:void(0);">Menu 6</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
    </ul>

    <div class="divClr"></div>

</div>
<!-- divTopMenu1 ENDS -->

<div class="divClr"></div>

</div>
<!-- divPgContent ENDS -->

任何帮助都将不胜感激

---

谢谢。

我想这就是你想要实现的目标：

请注意，我将

位置：relative

声明移到了

ul#topmenu1

，这样您就可以在不依赖当前活动

的元素中绝对定位子菜单

顶部的
和左侧的
变为：

ul#topmenu1 ul
{
    ...

    left:0;
    top:39px;
}


注意：虽然你的CSS有点冗长，但你可以用更简洁的代码实现同样的效果，我想
你能为此发布一个JSFIDLE吗？始终更易于操作在这里：
ul#topmenu1 ul
{
    ...

    left:0;
    top:39px;
}