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>
붉은색볼드 표시한부분이 주석처리되거나 추가로넣은부분입니다.