CSS 가상 선택자 활용 실습_CSS
2021. 12. 16. 09:10ㆍksmart_html_css_js/HTML실습
728x90
사이드 메뉴바 완성하라.
답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
nav ul{list-style:none;margin:0;padding:0;}
.menu02{padding-left:15px;font-size:12px;}
.menu02 li{display:none;}
.menu01 li:hover .menu02 li{display:block;}
</style>
<body>
<nav>
<ul class="menu01">
<li>
메뉴1
<ul class="menu02">
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
메뉴1
<ul class="menu02">
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
메뉴1
<ul class="menu02">
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>728x90
'ksmart_html_css_js > HTML실습' 카테고리의 다른 글
| document api 실습 (0) | 2022.01.30 |
|---|---|
| html 요소 이벤트 - form 실습 (0) | 2022.01.30 |
| CSS 가상 선택자 실습_CSS (0) | 2021.12.15 |
| CSS 속성 종류 및 float 실습_CSS (0) | 2021.12.15 |
| HTML실습CSS 선택자 및 CSS 속성 종류 실습_CSS (0) | 2021.12.15 |