我正在尝试下拉菜单＆＃39; drop＆＃39;在悬停时，即使隐藏在下拉菜单的物理区域，它也会直接下降。我不知道我在这里做错了什么。请帮忙。
/*Totally irrelavet javascript code here:*/
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
$(document).unbind('keydown', arguments.callee);
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.stop();
}
}
});/*Some Fonts Here:*/
@font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar
{
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
}
.clearfix:after {
display:block;
clear:both;
}
.menu-wrap {
width:50%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu{
width:100%;
margin:0px auto;
text-align: center;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size:0.95vw;
line-height:0%;
}
.menu > ul > li {
float:middle;
display:inline-block;
position:relative;
font-size:1.2vw;
}
.menu > ul > li > a {
padding:0.7vw 5vh;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
.sub-menu li:hover {
opacity:1;
}
.sub-menu {
z-index: 99999;
width:100%;
padding:0px 0px;
position:absolute;
top:100%;
left:0px;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
z-index: -5;
}
.sub-menu li {
display:block;
font-size:1.2vw;
}
.sub-menu li a {
padding:10px 10px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
z-index: 99;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
margin: auto;
width: 80%;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
width: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:15;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit; /* Code for Firefox */
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
}
.text-center
{
text-align: center;
}<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
<a href="#">Gaming</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">YouTube</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</li>
<li>
<a href="schedule.html">Schedule</a>
</li>
<li class="current-item">
<a href="#">
<p class="rusty">RedstoneGaming</p>
</a>
</li>
<li>
<a href="equipment.html">Equipment</a>
</li>
<li>
<a href="contact.html">Contact Me</a>
</li>
<li class="login">
<a href="login.html">Login/Sign Up</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column"></div>
</div>
</body>
</html>
答案 0 :(得分：1)
你的问题在这里：
.sub-menu {
opacity:0;
}
你只是让子菜单不可见你没有不在那里。你应该使用display:none代替，然后让它可见， display:block。