Question

我是HTML的新手，我正在尝试一些我正在编写的页面上的东西。我正在使用记事本作为编辑器，因为它被推荐给w3schools的初学者。我有一个导航栏，当我的鼠标悬停在菜单选项（悬停）上时，我打算显示一个下拉菜单，在本例中为“Gifts”。我目前正在使用CSS学习HTML，我不想使用任何其他代码（如javascript等）。这是我的HTML代码：

    <body>
        <div id="body">
            <div id="header">
            </div>
            <div id="navigation">
                <a href="home.html">Home</a>
                <a id="gifts" href="gifts.html">Gifts</a>
                <div id="giftsDropDownList" hidden="true">
                    <a href="live-gifts.html">Live Gifts</a>
                    <a href="upcoming-gifts.html">Upcoming Gifts</a>
                    <a href="previous-gifts.html">Previous Gifts</a>
                </div>
                <a href="about.html">About</a>
                <a href="register.html">Register</a>
                <a href="log-in.html">Log in</a>
            </div>
            <div id="section">
            </div>
            <div id="footer">
                Visit us on <a href="http://www.facebook.com/WinLOLGifts">Facebook</a> /
                <a href="http://twitter.com/WinLOLGifts">Twitter</a>
            </div>
        </div>
    </body>

这是我的CSS代码：

body
{
    background-color: lightgrey;
}
div#body
{
    margin: auto;
    width: 810px;
}
div#header
{
    height: 150px;
    background-color: red;
    text-align: center;
    padding: 5px;
}
div#navigation
{
    float: left;
    height: 500px;
    background-color: #282828;
}
div#navigation a
{
    display: block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    background-color: #282828;
    color: #FFF;
    padding: 5px;
    margin: auto;
}
div#navigation a:hover
{
    background-color: #D96915;
}
div#navigation a:visited
{
    color: #FFF;
}
div#section
{
    background-color: green;
    float: left;
    width: 650px;
    height: 500px;
}
div#footer
{
    width: inherit;
    background-color: brown;
    text-align: center;
    color: #FFF;
}
div#footer a
{
    text-decoration: none;
    color: #FFF;
    padding: 5px;
}
div#footer a:visited
{
    color: #FFF;
}
div#giftsDropDownList a
{
    width: 130px;
}

如您所见，我使用的属性hidden =“true”，我不知道如何从CSS访问该属性。有什么帮助吗？

Answer 1

您有两个选择：

display block / none

a#giftsDropDownList {
    display:none; /* this will hide the dropdownlist */
}
#gifts:hover #giftsDropDownList {
    display:block; /* this will show the dropdownlist */
}

或者您可以使用可见性/隐藏

a#giftsDropDownList {
    visibility:hidden; /* this will hide the dropdownlist */
}
a#gifts:hover #giftsDropDownList {
    visibility:visible; /* this will show the dropdownlist */
}

希望这有帮助！

Answer 2

从html中删除{hidden =＆＃34; true＆＃34;}并将其添加到您的css中：

#giftsDropDownList{
  display:none;
}

#gifts:hover + #giftsDropDownList{
  display:block;
}

从CSS访问属性

2 个答案: