0
마우스를 가져 가면 드롭 다운 메뉴에 문제가 있습니다. 이 문제에 대한 도움을 주시면 감사하겠습니다.마우스를 올리면 드롭 다운 메뉴가 사라집니다.
* {
margin: 0;
padding: 0;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* Menu */
header>hide:before {
display: block;
content: "";
height: 30px;
width: 30px;
background: black url(burger.gif) no-repeat 0 0;
background-size: contain;
position: absolute;
top: 20px;
left: 0px;
margin: 0px;
}
header>nav {
display: none;
position: absolute;
text-align: left;
top: 50px;
left: 0;
width: 200px;
height: 193px;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
header>nav>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header>nav>ul>li {
position: relative;
float: none;
bottom: 0;
right: 0;
background: url(menu.png) no-repeat top right;
background-size: contain;
}
header>nav>ul>li>a {
font-size: 1em;
font-weight: bold;
text-decoration: none;
color: white;
margin: 0px 59px 0px 0px;
display: inline-block;
line-height: 48px;
padding: 0px 24px;
width: 60%;
white-space: nowrap;
}
header>nav>ul>li>a:hover {
background-color: rgb(146, 0, 0);
}
header>hide:hover + nav {
display: block;
}<!-- Header -->
<header class="clearfix">
<!-- Menu -->
<hide></hide>
<nav>
<ul>
<li>
<a href="#">123456</a>
</li>
<li>
<a href="#">123456</a>
</li>
<li>
<a href="#">123456</a>
</li>
<li>
<a href="#">123456</a>
</li>
</ul>
</nav>