html - 如何仅使用 CSS 创建带有垂直子菜单的水平 HTML 菜单？

Question

我想设计一个水平菜单和 onMouseover 我想要一个垂直子菜单出现。我浏览了很多并找到了一些代码，但是当我执行时，在几乎所有代码中我都正确地获得了水平菜单，但根本没有显示子菜单。

我在 Windows 上使用 ActivePerl 5.12 进行编程。

我正在使用 IE7 进行显示，这是我无法获得正确结果的原因吗？请帮我找到解决方案。谢谢。

这是我试图执行的代码片段..

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Trebuchet MS", Helvetica, Sans-Serif;
        font-size: 14px;
    }

    a {
        text-decoration: none;
        color: #838383;
    }

    a:hover {
        color: black;
    }

    menu {
        position: relative;
        margin-left: 30px;
    }

    menu a {
        display: block;
        width: 140px;
    }

    menu ul {
        list-style-type: none;
        padding-top: 5px;
    }

    menu li {
        float: left;
        position: relative;
        padding: 3px 0;
        text-align: center;
    }

    menu ul.sub-menu {
        display: none;
        position: absolute;
        top: 20px;
        left: -10px;
        padding: 10px;
        z-index: 90;
    }

    menu ul.sub-menu li {
        text-align: left;
    }

    menu li:hover ul.sub-menu {
        display: block;
        border: 1px solid #ececec;
    }
</style>

HTML 部分

    <div id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
            <ul class="sub-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Archives</a></li>
                <li><a href="#">New Posts</a></li>
                <li><a href="#">Recent Comments</a></li>
            </ul>
        </li>
        <li>
            <a href="#" >About</a>
            <ul class="sub-menu">
                <li><a href="#">Get to know us</a></li>
                <li><a href="#">Find out what we do</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul class="sub-menu">
                <li><a href="#">E-mail Us</a></li>
                <li><a href="#">Use Our Contact Form</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

首先，如果您有选择，请升级到 IE8。 IE7 真的没有理由被使用。 :-) 也就是说，IE7 应该做你想做的事...只是要注意它缺少重要的功能，所以它可能会让你的生活更加艰难。

其次，你的问题说你找到了一些“代码”(教程？)，但你没有得到你想要的结果；如果您告诉我们您使用了哪些教程，或者至少向我们展示了一些不起作用的代码，并告诉我们您遇到了哪些问题，这将会有所帮助。

不过，我会尝试提供一个答案......

您的问题暗示您想要编写一个仅由 CSS 控制的菜单。

考虑到这一点，使用什么语言生成 HTML 并不重要，因为您的 HTML 只需要包含嵌套的 <ul>。和 <li>标签，带有一些 ID 或类来告诉您的 CSS 在哪里应用它的样式。

从这个 Angular 来看，Perl 代码(或任何其他语言)不应该特别复杂。 CSS 可能很复杂，但这将与您的 Perl 代码分开。

在 CSS 中，:hover 样式将允许您构建鼠标悬停下拉功能。不需要 Perl(或 Javascript)。我建议查看 A List Apart地点;这是一个提供 CSS 教程的好网站，并且有一些非常好的 CSS 驱动菜单示例。