我制作了这个菜单，人们需要将鼠标指针放在屏幕右上角的项目上。但是，当我拖动指针时，菜单消失了。
我需要帮助知道如何修复这个菜单，而鼠标指针仍在菜单区，它保持活跃，只有当用户拖动鼠标指针离开该区域时才消失。
function apareceMenu()
{
document.querySelector(".menu").style.display = 'block';
}
function someMenu()
{
document.querySelector(".menu").style.display = 'none';
}@font-face {
font-family: 'california';
src: url('font/Hai_California.ttf');
src: url('Hai_California?#iefix') format('embedded-opentype'),
url('font/Hai_California.ttf') format('svg'),
url('font/Hai_California.ttf') format('truetype');
font-weight: normal;
font-style: normal;
/*
Usa uma fonte externa (baixada ou internet) e disponibiliza para que
caso o usuário não tenha a mesma instalada na sua máquina, seja feito o
download da fonte.
*/
}
html, body {
background-color: #ffff;
margin: 0;
padding: 0;
}
img.menu_icon {
margin-left: 15px;
margin-top: 15px;
width: 50px;
height: 50px;
}
.menu_icon:hover .menu {
display: block;
position: absolute;
z-index: -1;
}
img.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
#header {
position: absolute;
top: 0px;
width: 1366px;
height: 220px;
margin: 0px;
background: rgb(245,183,46);
background: linear-gradient(0deg, rgba(245,183,46,1) 0%, rgba(249,219,92,1) 100%);
color: black;
}
.menu {
opacity: 0.75;
position: absolute;
top: 0px;
width: 1366px;
height: 220px;
margin: 0px;
background-color: #cc444b;
color: white;
display: none;
z-index: 1;
}
.menu ul li {
list-style: none;
}
.menu1 {
margin-left: 30px;
}
#header h1 {
margin-top: 50px;
text-align: center;
}
.logo {
margin-top: -250px;
width: 120px;
height: 120px;
}
/*
Centraliza a imaem dentro do header
*/
.logo_nome {
margin-top: auto;
}
.logo_nome a {
color: black;
text-decoration: none;
}
.conteiner img {
max-width: 200px;
max-height: 150px;
width: auto;
height: auto;
}
h1 {
font-weight: bold;
text-shadow: 5px 5px 7px #6b722d;
font-size: 70px;
font-family: california, cursive;
}
.linha {
height: 13px;
margin-top: 76px;
color: #cc444b;
background-color: #cc444b;
border-width: 0;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="sortcut icon" type="image/x-icon" href="fotos/logo.png">
<link rel="stylesheet" type="text/css" href="css/index.css" >
<title>Sal de Ouro</title>
</head>
<body>
<nav class="menu" onmouseout="someMenu()">
<div class="menu1">
<ul>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Texte</a></li>
</ul>
</div>
</nav>
<div id="header">
<img class="menu_icon" onmouseover="apareceMenu()" src="fotos/menu.png" >
<h1>Sal de Ouro</h1>
<img class="logo" src="fotos/logo.png" />
<hr class="linha">
</div>
</body>
<script type="text/javascript" src="javascript/index.js"></script>
</html>你只能使用CSS，而不能使用JavaScript。
你需要在整个导航栏周围放置一个容器，包括图标。(这里用的是<nav>)
<nav>
<img class="menu_icon" src="fotos/menu.png">
<div class='menu'>
<div class="menu1">
<ul>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Texte</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.menu {
display: none;
}
nav:hover .menu {
display: block;
}
这个CSS隐藏.menu。然后显示.menu，如果在导航上的任何地方被悬停。
@font-face {
font-family: 'california';
src: url('font/Hai_California.ttf');
src: url('Hai_California?#iefix') format('embedded-opentype'),
url('font/Hai_California.ttf') format('svg'),
url('font/Hai_California.ttf') format('truetype');
font-weight: normal;
font-style: normal;
/*
Usa uma fonte externa (baixada ou internet) e disponibiliza para que
caso o usuário não tenha a mesma instalada na sua máquina, seja feito o
download da fonte.
*/
}
html, body {
background-color: #ffff;
margin: 0;
padding: 0;
}
img.menu_icon {
margin-left: 15px;
margin-top: 15px;
width: 50px;
height: 50px;
}
img.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
#header {
position: absolute;
top: 0px;
width: 1366px;
height: 220px;
margin: 0px;
background: rgb(245,183,46);
background: linear-gradient(0deg, rgba(245,183,46,1) 0%, rgba(249,219,92,1) 100%);
color: black;
}
.menu {
opacity: 0.75;
position: absolute;
top: 0px;
width: 1366px;
height: 220px;
margin: 0px;
background-color: #cc444b;
color: white;
z-index: 1;
}
.menu ul li {
list-style: none;
}
.menu1 {
margin-left: 30px;
}
#header h1 {
margin-top: 50px;
text-align: center;
}
.logo {
margin-top: -250px;
width: 120px;
height: 120px;
}
/*
Centraliza a imaem dentro do header
*/
.logo_nome {
margin-top: auto;
}
.logo_nome a {
color: black;
}
/* NEW PART */
.menu {
display: none;
}
nav:hover .menu {
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<nav>
<img class="menu_icon" src="fotos/menu.png">
<div class='menu'>
<div class="menu1">
<ul>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Texte</a></li>
</ul>
</div>
</div>
</nav>
<h1>Sal de Ouro</h1>
<img class="logo" src="fotos/logo.png" />
<hr class="linha">
</div>
</body>
</html>