"미디어위키:Vector.css"의 두 판 사이의 차이
Encyves Wiki
14번째 줄: | 14번째 줄: | ||
.dropdown-content { | .dropdown-content { | ||
− | + | ||
position: absolute; | position: absolute; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
20번째 줄: | 20번째 줄: | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
margin-bottom:50px; | margin-bottom:50px; | ||
− | + | visibility: hidden; /* hides sub-menu */ | |
− | + | opacity: 0; | |
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: -10%; | ||
+ | transition: all 0.5s ease 0s, visibility 0s linear 0.5s; | ||
+ | |||
} | } | ||
35번째 줄: | 40번째 줄: | ||
.dropdown:hover .dropdown-content { | .dropdown:hover .dropdown-content { | ||
− | + | visibility: visible; /* shows sub-menu */ | |
− | + | opacity: 1; | |
+ | left: 0; | ||
+ | |||
} | } |
2017년 8월 3일 (목) 02:48 판
/* 이 CSS 설정은 벡터 스킨을 사용하는 사용자에게 적용됩니다 */
h2{font-weight:bold}
.dropbtn {
cursor:point
}
.dropdown:before {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-bottom:50px;
visibility: hidden; /* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: -10%;
transition: all 0.5s ease 0s, visibility 0s linear 0.5s;
}
.dropdown-content a {
padding-right:10px;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
visibility: visible; /* shows sub-menu */
opacity: 1;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: lightgray;
}