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

Question

我想设计一个水平菜单，当鼠标悬停时我想出现一个垂直子菜单。 我上网冲浪了很多，找到了一些代码，但是当我执行时，几乎所有代码中我都能正确获得水平菜单，但子菜单根本不显示。

我正在 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 驱动菜单示例。