css에 메뉴에 대한 질문입니다.
본문
css 왕초보입니다ㅠ
-> 
현재 메뉴이구요 이렇게 바꾸고싶습니다
메뉴 A-1을 누르거나 A-2를 누를때마다 밑에 검은메뉴들이 전체로 나오게 하고싶은데 어디 부분을 건드려야 될지 모르겠습니다
html소스는
<div class="header">
<ul>
<li>A-1
<ul>
<li class="nav_detail"><a href="#">A</a></li>
<li class="nav_detail"><a href="#">B</a></li>
<li class="nav_detail"><a href="#">C</a></li>
<li class="nav_detail"><a href="#">D</a></li>
<li class="nav_detail"><a href="#">E</a></li>
</ul>
</li>
<li>A-2
<ul>
<li class="nav_detail"><a href="#">F</a></li>
<li class="nav_detail"><a href="#">G</a></li>
<li class="nav_detail"><a href="#">H</a></li>
<li class="nav_detail"><a href="#">I</a></li>
<li class="nav_detail"><a href="#">J</a></li>
</ul>
</li>
</ul>
</div>
css 소스는
.header{
font-weight: bold;
width: 100%;
height: 20px;
box-sizing: border-box;
}
body{
list-style: none;
}
.header ul {
float: right;
height: 100%;
width: 40%;
font-size: 20px;
}
.header li ul .nav_detail a:hover {
background: black;
color: white;
}
body, h1, h2, h3, ul, ol, li {
padding: 0;
margin: 0;
}
.header li ul .nav_detail a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
text-align: center;
text-decoration: none;
}
.header li ul .nav_detail {
position: relative;
text-align: left;
font-size: 14px;
font-weight: bold;
color: #fff;
background: black;
line-height: 40px;
list-style: none;
width: 100%;
height: 40px;
cursor: pointer;
z-index: 9999;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
.header>ul>li:hover {
color: gray;
}
.header li:hover {
background-color: inherit;
}
.header li {
position: relative;
text-align: center;
list-style: none;
float: left;
line-height: 20px;
width: 10%;
color: #444444;
cursor: pointer;
}
.header li:hover > ul {
display: block;
}
.header li ul {
display: none;
position: relative;
z-index: 9999;
width: 100%;
z-index: 9999;
}
이렇습니다 ㅠㅠㅠ 어디부분을 고쳐야될지 가르켜주시면 정말 감사하겠습니다
답변 1
<style>
.header{
font-weight: bold;
width: 100%;
height: 20px;
box-sizing: border-box;
}
body{
list-style: none;
}
.header ul {
float: right;
height: 100%;
width: 40%;
font-size: 20px;
}
.header li ul .nav_detail a:hover {
background: black;
color: white;
}
body, h1, h2, h3, ul, ol, li {
padding: 0;
margin: 0;
}
.header li ul .nav_detail a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
text-align: center;
text-decoration: none;
}
.header li ul .nav_detail {
position: relative;
text-align: left;
font-size: 14px;
font-weight: bold;
color: #fff;
background: black;
line-height: 40px;
list-style: none;
width: 100%;
height: 40px;
cursor: pointer;
z-index: 9999;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
//padding-inline-start: 40px;
}
.header>ul>li:hover {
color: gray;
}
.header li:hover {
background-color: inherit;
}
.header li {
position: relative;
text-align: center;
list-style: none;
float: left;
line-height: 20px;
width: 10%;
color: #444444;
cursor: pointer;
}
/*
.header li:hover > ul {
display: block;
}
.header li ul {
display: none;
position: relative;
z-index: 9999;
width: 100%;
z-index: 9999;
}
*/
.header .sub-menu {
display: none;
position: relative;
z-index: 9999;
width: 100%;
z-index: 9999;
}
.header .sub-menu{
display: none;
}
.header .sub-menu.show{
display:block;
}
</style>
<div class="header">
<ul>
<li>A-1
<ul class="sub-menu">
<li class="nav_detail"><a href="#">A</a></li>
<li class="nav_detail"><a href="#">B</a></li>
<li class="nav_detail"><a href="#">C</a></li>
<li class="nav_detail"><a href="#">D</a></li>
<li class="nav_detail"><a href="#">E</a></li>
</ul>
</li>
<li>A-2
<ul class="sub-menu">
<li class="nav_detail"><a href="#">F</a></li>
<li class="nav_detail"><a href="#">G</a></li>
<li class="nav_detail"><a href="#">H</a></li>
<li class="nav_detail"><a href="#">I</a></li>
<li class="nav_detail"><a href="#">J</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
$(".header>ul>li").hover(function () {
$(".header .sub-menu").addClass('show')
},function () {
$(".header .sub-menu").removeClass('show')
})
})
</script>
붉은색볼드 표시한부분이 주석처리되거나 추가로넣은부분입니다.
너무감사합니다ㅠㅠㅠ덕분에 배워갑니다
혹시 슬라이드로 마우스올렸을때 천천히 내려갔다가 마우스를 떼면 올라오게하려면 어디를 참고하거나 바꾸면 될까요?
