drop-down 메뉴에 trasition 사용 질문입니다.
로다
드롭다운 메뉴를 나름 구현을 했습니다. 그래서 정상적으로 작동은 합니다. 문제는 이제 transition 을 넣고 싶은데 ;;;
도대체 어디다가 넣어야되는지를 모르겠군요;;; 이리저리 다 넣어봐도 안되는거 같아서요.
메뉴 html
div class=drop-menu a href=#Company/a ul class=sub-menu lia href=#Introduce/a/li lia href=#Vision/a/li lia href=#Business Area/a/li /ul /div
.drop-menu { display: block; text-align: center; padding: 10px 10px; margin:0 0 0 10px; font-size: 22px; height: 25px; max-height: 25px; width: 160px; background: #FFE6F0; cursor: pointer; float:left; border-radius:10px 10px 0 0 ; border-bottom:3px solid #F2BDD2;}.drop-menua{ color:#803E59; text-shadow: 5px 5px 2px #c79bc7; filter: dropshadow(color=#c79bc7, offx=5, offy=5); text-decoration:none;}.drop-menua:hover{ color:#ab3e3e; text-shadow: 5px 5px 2px #c79bc7; filter: dropshadow(color=#c79bc7, offx=5, offy=5);} .drop-menu:hover{ border-bottom:3px solid #C9A3B3; } .drop-menu:hover .sub-menu { display: inline-block; background:#E0D7DB; } .sub-menu { text-align: left; display: none; width: 160px; padding: 5px 10px; margin-left: -10px; margin-top: 18px; border-radius:0 0 10px 10px; } .sub-menu li { list-style-type: none; display: block; font-size: 19px; height: 22px; padding: 3px 0; } .sub-menu li a { text-decoration:none; }
hover 한 상태면 화면이 뚝뚝 떨어집니다. 이걸좀더 부드럽게 떨어지게 하고 싶은데요... 어떻게 해야될까요 ?
-
과꽃
감사합니다 한번 해볼게요
-
모든
hover가 되기전 태크에 지정해 주시면 hover할때 변하는 스타일에 맞게 스무스하게 변할꺼예요~
-
솔빛길
hover부분에다가 넣으면 되지않을까요