我正在尝试制作一个下拉菜单(类是“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>最佳答案
您尝试选择的 ul 出现在 li 之后；你应该移动你试图在 li 中显示的 ul 而不是在它之后。
<li id="scenebutton">
SCENES
<ul class="scenemenu">
<li>...</li>
</ul>
</li>
此外，您需要为 scenebutton 使用 id 选择器。
#scenebutton:hover ul.scenemenu {
关于html - 下拉菜单不会出现。我是否错误地使用了选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30448192/