Difference between revisions of "Template:DLUT China B/css/nav.css"

(增加多浏览器支持。)
m (修改配色。)
 
Line 14: Line 14:
 
}
 
}
  
−
ul.menu {
+
#dlutb #nav{
−
     height: 2em;
+
    width:100%;
−
     width: max-content;
+
     height: 60px;
−
     width:-moz-max-content;
+
     margin:0;
 +
    background-color:#ee9147;
 +
}
 +
#dlutb #nav ul.menu {
 +
     height: 60px;
 
     padding: 0;
 
     padding: 0;
 +
    color:rgb(255,230,153);
 +
    display: table;
 +
    margin:0 auto;
 
}
 
}
  
Line 24: Line 31:
 
     list-style: none;
 
     list-style: none;
 
     float: left;
 
     float: left;
−
     padding-left: 10px;
+
     padding-left: 20px;
−
     padding-right: 10px;
+
     padding-right: 20px;
−
     line-height: 2em;
+
     line-height: 60px;
 +
    height: 60px;
 
     text-align: center;
 
     text-align: center;
−
     font-size: 16px;
+
     font-size: 18px;
 
}
 
}
  
Line 60: Line 68:
 
     flex-flow: column;
 
     flex-flow: column;
 
     margin: 0;
 
     margin: 0;
−
}
 
−
 
−
ul.menu > li:last-child > ul.subMenu {
 
−
    right: 0;
 
 
}
 
}
  
Line 69: Line 73:
 
     display: block;
 
     display: block;
 
     position: relative;
 
     position: relative;
−
     background-color: #f7f7f7;
+
     background-color: #ed7d31d0;
 
     padding: 5px 20px;
 
     padding: 5px 20px;
 
     margin: 0;
 
     margin: 0;
 +
    line-height: 40px;
 
}
 
}
  
Line 82: Line 87:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
    box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);
 
 
     z-index: -1;
 
     z-index: -1;
 +
}
 +
ul.menu > li > ul.subMenu{
 +
    box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);
 
}
 
}
  
Line 98: Line 105:
 
     position: relative;
 
     position: relative;
 
     bottom: 3px;
 
     bottom: 3px;
−
     background: #41cd52;
+
     background: rgb(230,95,23);
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}

Latest revision as of 11:36, 10 October 2018

@keyframes fadeInDown { 

   0% {
       opacity: 0;
       -moz-opacity: 0;
       transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0,-30px,0);
   }
   100% {
       opacity: 1;
       -moz-opacity: 1;
       transform: none;
       -moz-transform: none;
   }

}

  1. dlutb #nav{
   width:100%;
   height: 60px;
   margin:0;
   background-color:#ee9147;

}

  1. dlutb #nav ul.menu {
   height: 60px;
   padding: 0;
   color:rgb(255,230,153);
   display: table;
   margin:0 auto;

}

ul.menu > li { 

   list-style: none;
   float: left;
   padding-left: 20px;
   padding-right: 20px;
   line-height: 60px;
   height: 60px;
   text-align: center;
   font-size: 18px;

}

ul.menu > li:hover { 

   color: inherit;

}

ul.menu > li > ul.subMenu { 

   padding: 0;
   display: none;
   position: absolute;
   z-index: 1;
   text-align: left;

}

ul.menu > li:hover > ul.subMenu { 

   -webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1);
   animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display:flex;
   display:-moz-flex;
   display:-ms-flex;
   display:-o-flex;
   display:-webkit-flex;
   -webkit-flex-flow: column;
   flex-flow: column;
   margin: 0;

}

ul.menu > li > ul.subMenu > li { 

   display: block;
   position: relative;
   background-color: #ed7d31d0;
   padding: 5px 20px;
   margin: 0;
   line-height: 40px;

}

ul.menu > li > ul.subMenu > li:before { 

   position: absolute;
   display: block;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;

} ul.menu > li > ul.subMenu{ 

   box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);

}

ul.menu > li:after { 

   -webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -o-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   transition: all .8s cubic-bezier(.19, 1, .22, 1);
   content: "";
   display: block;
   width: 0;
   height: 3px;
   position: relative;
   bottom: 3px;
   background: rgb(230,95,23);
   z-index: 1;

}

ul.menu > li:hover:after { 

   width: 100%;

}