0

我正在尝试使用 CSS 构建一个下拉菜单，并且我已经成功隐藏了下拉菜单，但无法让它重新出现。我很确定问题出在 :hover 标签上，我已经从这里的 css 中取出了它，因为我无法让它工作。帮助CSS？请？绝望的。

HTML 代码：

<div id="navigation">
    <ul id="menu">
        <li class="menu"><a href="#home">Home</a></li>
        <li class="menu"><a href="#news">About Us</a></li>
        <ul class="sub_menu">
            <li>Our Mission Statement</li>
            <li>How Funds Are Spent</li>
            <ul class="sub_sub_menu">
                The Founders
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
            </ul>
        </ul>
        <li class="menu"><a href="#contact">What We Do</a></li>
        <ul class="sub_menu">
            <li>T-Shirt Designs</li>
            <li>Future Design Ideas</li>
            <ul class="sub_sub_menu">
                Fact Sheets
                <li>How Our Fact Sheets Work</li>
                <li>Fact Sheet 1</li>
            </ul>
        </ul>
        <li class="menu"><a href="#about">Media</a></li>
        <li class="menu"><a href="#contact">Contact Us</a></li>
    </ul>
</div>

CSS如下：

ul {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}
li.menu {
    display: inline
}
a:link, a:visited {
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #B4B7BD;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover, a:active {
    background-color: #B4B7BD
}
ul.sub_menu li {
    position: relative;
    display: none;
    width: 100%;
}
ul.sub_sub_menu {
    position: relative;
    display: none;
}
ul.sub_sub_menu li {
    position: relative;
    display: none;
    width: 100%;
    left: 100%;
}
4

1 回答 1

1

HTML 问题

首先

<ul class="sub_sub_menu">The Founders

在无序列表标签中包含文本是非法的，如果这意味着列表的标题，那么标题需要是无序列表嵌套在其中的列表项中的文本/链接。

此外，您已经多次这样做了：

<li class="menu"><a href="#news">About Us</a></li>
    <ul class="sub_menu">
        <li>Our Mission Statement</li>
        <li>How Funds Are Spent</li>
    </ul>

您的代码需要在哪里：

<li class="menu"><a href="#news">About Us</a>
    <ul class="sub_menu">
        <li>Our Mission Statement</li>
        <li>How Funds Are Spent</li>
    </ul>
</li>

您可以看到，无序列表在第二个示例中正确嵌套，但在第一个示例中不是，这会导致您出现问题。

这些是我认为的 HTML 问题，现在到 css。

CSS 问题

您应该只需要向您的 css 添加代码即可使其工作，这里是一个示例，说明如何在您翻转菜单项时显示第一个子菜单。

li.menu:hover ul li {
        display: block;
}

只需对您拥有的各种子和子菜单重复此操作即可。

最后一件事是你对选择器的使用有点粗略，如果你有“.sub_menu”作为一个类，那么你不需要在它前面加上元素类型，除非有多种类型的元素和你想选择一个，这是我看不到你在你的网站上做的事情，所以而不是：

li.menu
ul.sub_menu
ul.sub_sub_menu

只需将类用作选择器：

.menu
.sub_menu
.sub_sub_menu

这种做法在现代浏览器中渲染速度更快，并且在许多方面阅读起来更清晰。

你去吧！现在应该一切正常。

于 2012-09-09T06:20:38.620 回答