"미디어위키:Vector.css"의 두 판 사이의 차이

Encyves Wiki
이동: 둘러보기, 검색
14번째 줄: 14번째 줄:
  
 
.dropdown-content {
 
.dropdown-content {
     display: none;
+
      
 
     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 {
 
      
 
      
    display: block;
+
    visibility: visible; /* shows sub-menu */
    transition:height 3s;
+
  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;
}