본문 바로가기

UIUX DESIGN/웹디자인기능사

세로로 쏟아지는 메뉴 호버

반응형

부모에 호버 넣고 좀더 싸이즈 크게 만들어야 한다

 

*{margin:0; padding:0;}
li{list-style: none;}
a:link, a:visited{text-decoration: none; color:#333333;}
#wrap{width:1000px; height:650px; margin-left:0; display: flex;}

#logo{width:200px; height:650px;}

#logo img {width:200px; height:40px; margin-top:50px;}

#logo ul{ width:200px; height:200px;}
#logo li{width:200px; height:50px; text-align: center; line-height: 50px;position: relative; transition:all 0.2s;}
#logo li:hover{height:200px;}
#logo li:hover dl{height:150px;}

#logo dl{width:200px; height:0px; position:absolute; top:50px; left:0;background: #e1e1e1; overflow: hidden; transition:all 0.5s;z-index: 2;}

#logo a{display: block;}
#logo a:hover{background: pink; color:darkblue;}
#logo dt{width:200px; height:50px; }
#logo dd{width:200px; height:50px; }

 

 

 

 



만약 여기서

#logo li:hover{height:200px;}

를 넣지 않으면

 

 

 

이렇게 전에 있던 부모메뉴를 먹어버린다.(가림)

반응형