<!doctype html> <html> <head> <title>CSS Project1</title> </head> <body> <nav> <ul> <li class="dropdown"> <div class="dropdown-menu">Menu1</div> <div class="dropdown-content"> <a href="#">Menu1-1</a> <a href="#">Menu1-2</a> <a href="#">Menu1-3</a> <a href="#">Menu1-4</a> </div> </li> <li class="dropdown"> <div class="dropdown-menu">Menu2</div> <div class="dropdown-content"> <a href="#">Menu2-1</a> <a href="#">Menu2-2</a> <a href="#">Menu2-3</a> <a href="#">Menu2-4</a> </div> </li> <li class="dropdown"> <div class="dropdown-menu">Menu3</div> <div class="dropdown-content"> <a href="#">Menu3-1</a> <a href="#">Menu3-2</a> <a href="#">Menu3-3</a> <a href="#">Menu3-4</a> </div> </li> <li class="dropdown"> <div class="dropdown-menu">Menu4</div> </li> <li class="home"><a href="#">Home</a></li> </ul> </nav> </body> </html>
body { margin-top: 30px; } nav ul { width: 100%; background-color: rgba(44, 42, 39, 0.983); list-style-type: none; /* 마진 패딩 지정하지 않으면 브라우저 기본 스타일을 따라 설정되므로 오버라이딩 필요 */ margin: 0; padding: 0; } /* li 는 블록요소인데 inline-block 으로 인라인속성 부여해서 나란히 배치 */ nav ul li { display: inline-block; } .home { background-color: darkorange; width: 100px; text-align: center; font-weight: bold; float: right; } .home a { display: block; text-decoration: none; color: white; padding: 16px 16px; } .dropdown { position: relative; } .dropdown-menu { /*background-color: darkorange; */ color: white; padding: 16px; font-size: 16px; cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* dropdown-menu 에는 hover 적용이 안됨 */ .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown-menu:hover:not(.home) { background-color: darkorange; color: white; }