Question

我正在尝试制作一个下拉菜单（类是“scenemenu”），当我将鼠标悬停在li类“scenebutton”上时出现。但是，我不确定我使用的CSS选择器是否正确。有人可以帮我解决一下吗？这是我的代码。

@charset "utf-8";
/* CSS Document */
body{
    background-color:#000;
    background-image:url(Pictures/Plundergem-Title.png);
    background-repeat:no-repeat;
    background-position:50% 0%;
    height:1500px;
}
.menu-list{
    list-style-type:none;
    color:#E92A27;
    font-family:"Mayan Font";
    font-size:36px;
}
.menu-list li{
    cursor:pointer;
}
.menu-list li:hover{
    background-color:#E92A27;
    color:#000;
}

@font-face{
    src:url(CFCivilisationMaya-Regular.ttf);
    font-family:"Mayan Font";

}
.menu-block{
    width:200px;
    position:fixed;
    top:200px;
    left:-23px;
    border-right:3px solid #E92A27;
}
#menu-seperation{
    width:150px;
    position:fixed;
    left:20px;
    top:270px;

}


#flash-container{
    position:relative;
    height:500px;
    width:700px;
    left:300px;
    top:700px;
    color:#FFF;
    font-family:"Cataneo BT";
    font-size:18px;
}

#flash-container p{
    color:#FFF;
    font-family:"Text Font";

}

@font-face{
    font-family:"Text Font";
    src:url(TT0952M_.TTF);

}


.scenemenu{

    list-style-type:none;
    color:#E92A27;
    font-family:"Mayan Font";
    position:fixed;
    top:297px;
    left:190px;
    z-index:2000;
    width:150px;
    display:none;				}

.scenemenu li{
    position:relative;
    left:-50px;
}

li.scenebutton:hover ul.scenemenu{
    display:inline;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery-scrollto.js"></script>
    <script src="animation.js"></script>
    <link rel="shortcut icon" href="Pictures/Gem Icon.png" />
    <title>Plundergem Adventure Game</title>
</head>

<body>
<div class="menu-block">
    <ul class="menu-list">
        <li>HOME</li>
        <hr id="menu-seperation"/>
        <br style="line-height: .3em" />

        <li id="scenebutton">SCENES</li>
        <ul class="scenemenu">
            <li>SCENE 2</li>
            <li>SCENE 3</li>
        </ul>
    </ul>
</div>
<div id="flash-container">
    <img src="Pictures/Scene_1_converted.jpg" width="700" height="504" />
    <p>The sky is dark, the grass is dark, and even the dark is quite dark. This will do a perfect job of setting the mood. Unfortunately, it is raining, meaning that you will be unable to pull off your uncanny Batman impressions. Will you climb the temple stairs, or will you head home?</p>
    <br />
    <a href="Enter the Temple 2nd Scene/index.php"><u>1. Climb the temple stairs in an over manly fashion.</u></a>
    <br />
    <br />
    <a><u>2. Run away and never come back.</u></a>
</div>

</body>
</html>

Answer 1

{I} {}} {} {{} {{{{{{{{{{您应该移动ul，而不是在li之后显示。{/ p>

ul

此外，您需要使用li的ID选择器。

<li id="scenebutton">
    SCENES
    <ul class="scenemenu">
        <li>...</li>
    </ul>
</li>

下拉菜单不会出现。我错误地使用了选择器吗？

1 个答案: