$$config title: Web3 수업 9일차 keywords: - a::after - 메가메뉴 $$ # 가운데에서부터 시작하는 언더라인 ```css .menu-box-1>li>a::after{ content:""; position:absolute; height:1px; width:0px; left:0; bottom:-5px; border-top:2px solid tomato; transition:.3s; } .menu-box-2>li>a::after{ left:50%; transform:translatex(-50%); } .menu-box-1>li:hover>a::after{ width:100%; } ``` # 메가메뉴 ```css html

PROGRAM

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae vitae voluptatem ratione unde recusandae, enim illum. Fugit in et qui a pariatur magni ipsa voluptates ipsam perspiciatis. Sapiente, hic esse. At maxime earum nesciunt delectus quod, sapiente rem? Placeat dolorum doloremque, quo non laboriosam iste perspiciatis quod minima culpa atque vel. Sed error ex placeat necessitatibus ea mollitia doloribus esse? Autem, molestiae! Sapiente aperiam culpa vel quae dignissimos sint, porro corporis, consequatur totam provident aliquam asperiores fuga, tenetur ipsa. Non nesciunt labore reiciendis officia sint pariatur autem culpa aperiam ipsam. Quos impedit reprehenderit animi, voluptas ea voluptate pariatur quidem praesentium blanditiis porro dignissimos eum ipsum ut consequuntur? Sequi iure qui, placeat ipsum rem earum explicabo illo soluta praesentium ducimus nulla.
#EMERGENCY

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et placeat veritatis quis at in numquam quia officiis porro error, molestias odio suscipit nesciunt modi a accusantium dolorum ex fugit hic. Pariatur at eum omnis, impedit, numquam adipisci atque unde expedita aliquid aliquam tempora tempore eveniet placeat consectetur laborum porro, excepturi quia quisquam explicabo recusandae tenetur! Aut ex ab exercitationem asperiores! Nesciunt nisi sunt eveniet dolor, deserunt recusandae commodi. Nesciunt, incidunt alias temporibus commodi repudiandae doloremque nam, quaerat non saepe corrupti suscipit tempora odit fuga quos at maiores vitae eveniet iure.

CSS :root { --site-width: 1000px; } .con { width: var(--site-width); margin: 0 auto; } .con-min-width { min-width: var(--site-width); } .menu-bar { background-color: white; } body { background-color: lemonchiffon; } .menu-1 > ul > li > div { background-color: darkorange; position: absolute; left: 0; width: 100%; display: none; } .menu-1 > ul > li:hover > div { display: block; } ```