HTML问题

Question

我正在尝试使用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%;
}

Answer 1

HTML问题

首先

<ul class="sub_sub_menu">The Founders

在无序列表标记中包含文本是非法的，如果这是对列表的标题，那么标题需要是列表项中的文本/链接，无序列表嵌套在其中。< / p>

另外，你已经多次这样做了：

<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;
}

对于各种子＆amp;你拥有的次级菜单。

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

li.menu
ul.sub_menu
ul.sub_sub_menu

只需将该类用作选择器：

.menu
.sub_menu
.sub_sub_menu

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

你去吧！它现在应该都很好用了。

下拉菜单定位

1 个答案:

HTML问题

CSS问题