세부 메뉴바는 마우스를 올렸을 때 내부의 세부 요소들이 보여야 하기 때문에 이전의 세부 요소 코드들보다 조금 어렵다.
<!DOCTYPE html>
<html lang="en">
<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">
<title>메뉴바</title>
<style>
div{
/* border: 1px solid red; */
box-sizing: border-box;
}
.nevigator{
width: 1000px;
height: 40px;
}
#nevi{
/* border: 1px solid blue; */
list-style-type: none;
margin: 0;
padding: 0;
/*
ul 요소는 기본적으로 위, 아래 margin이 존재.
ul 요소에 padding도 존재함.
여백 관련 모든 요소가 왼쪽에 달라 붙을 것.
*/
height: 100%;
}
#nevi>li {
/* border: 1px solid blue; */
float: left;
width: 15%;
height: 100%;
text-align: center;
}
#nevi a{
/* border: 1px solid green; */
text-decoration: none;
color: cornflowerblue;
font-size: 17px;
font-weight: 900;
width: 100%;
height: 100%;
display: block;
/*
a 태그는 인라인 요소이기 때문에 width, height 속성이
적용되지 않아서, 블럭 요소로 변경해야 한다.
*/
/* vertical-align: middle;
vertical-align 속성은 inline 요소에만 적용 가능
*/
line-height: 35px;
/*
블럭요소의 새로길이만큼 크기를 부여하면 자동으로 가운데로 옴
*/
}
#nevi a:hover{
font-size: 18px;
color: coral;
}
#nevi>li>ul{
list-style-type: none;
padding: 0;
display: none;
}
#nevi>li>ul a{
font-size: 14px;
}
#nevi>li>ul a:hover{
font-size: 15px;
}
/* 아이디가 nevi인 요소의 자손 중 li의 자손 중 a태그에 마우스가 올라 갔을 때
같은 레벨의 바로 뒤에 있는 요소 중에 ul 태그를 가져옴 */
#nevi>li>a:hover+ul{
/* 평소에는 안보여지다가 마우스가 올라갈 때만 효과를 부여 */
display: block;
}
#nevi>li>ul:hover{
display: block;
}
</style>
</head>
<body>
<div class="nevigator">
<ul id="nevi">
<li><a href="">java</a></li>
<li><a href="">Oracle</a></li>
<li>
<a href="">Front-End</a>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">Jquery</a></li>
</ul>
</li>
<li>
<a href="">Server</a>
<ul>
<li><a href="">JDBC</a></li>
<li><a href="">Servlet</a></li>
<li><a href="">JSP</a></li>
<li><a href="">Ajax</a></li>
</ul>
</li>
<li>
<a href="">Framework</a>
<ul>
<li><a href="">MyBatis</a></li>
<li><a href="">Spring</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>