Template:GreatBay SCIE/CSS/movable navbar new

html, body{

   background-color: rgb(217,216,211);
   height: 100%;
   width: 99%;

} .header{

   width:100%;

}

1. navbar, .navbar{ /*整个navbar的共用样式*/

   width: 100%;
   text-align: center;

   margin-top: -20px;
   margin-left: -25px;

   position: relative; 
   
   z-index: 114514;
   /*当navbar处于元素流中时：/*position:relative; top:auto  z-index:3;*/ 

}

1. navbar.stick{ /*用于js*/

   margin-top: 14px; top:0; position:fixed;

}

1. top {/*用于滚动栏位置不变*/

   _position: absolute;
   _bottom: auto;
   _top: expression(eval(document.documentElement.scrollTop));

}

.navbar ul { /*整一个navbar一级背景的样式*/

   /*width: 232%;*/
   width:85.7%;
   display:inline-table;
   list-style: none;

   padding:15px 24px 15px; /*导航栏上部的大小*/
   background-color:#f2f2f2; /*导航栏的背景颜色*/
   color:#000;/*导航栏的字体颜色*/
   margin-left:  0px;

   padding-left:18%;
/*整个导航栏朝左边的距离*/
   /*box-shadow:1px 1px 3px rgb(255, 255, 255); 阴影，暂时不需要*/ 

} .navbar ul::after { /*忘了写来干什么的了 暂且忽略*/

   content:"";
   clear:both;

}

.navbar ul li {/*一级导航栏上每一个按钮*/

   position: relative; /*这行无论如何都不要动*/

   float: left; /*决定导航栏到左边还是到右边 需要更改html*/

   margin-right: 30px;
   -webkit-transition-property: background-color;
   -webkit-transition-duration: 0.3s;
   -webkit-transition-timing-function: ease;
   border-radius:8px; 
   /*border-top-left-radius:0px;/*按钮左上角圆角*/

} .navbar ul li:hover {/*一级导航栏上每一个按钮*/

   background-color: rgb(64,106,120);

} .navbar ul li a { /*一级导航栏文字*/

   display:block;
   text-align: center;
   list-style: none;
   text-decoration:none;
   /*font-variant:small-caps;*/
   font-weight: 700;
   
   font-family: "JosefinSans"; /*字体*/
   font-size: 100%; /*字体大小*/
   font-weight: 700;

   color: black;/*#999faa;*//*字体颜色*/
   transition: color 0.5s;/*基于颜色的过渡*/
   font-weight: 700;
   padding: 7px 24px; /*文字与按钮的间距*/

} .navbar ul li:hover a{

   color: white;

} .navbar ul li a:hover {

   list-style: none;
   color:white;/*颜色，暂且不变*/
   transition:all 0.2s;

} .navbar ul li ul { /*二级导航栏的整体与背景*/

   position: absolute;
   display: block;
   overflow: hidden; /*基本代码 请不要动*/

   margin-top: 0px; /*二级导航栏整体与一级导航栏的间距*/
   padding: 0px 10px 0px 10px;/*按钮与左右边的间距
   将这行代码的第1或第3个值改了的话后果自负*/
   width: 250px;
   /*基于透明度的过渡*/
   max-height: 0px; /*基于高度的过渡*/
   opacity:0%;
   /*transition: all 0.2s ease-out;*/ 
   box-shadow: none; /*拒绝继承值*/
   /*border-radius:15px; 二级导航栏整体圆角*/
   border-radius: 8px;
   background-color:#ffffff;
   z-index:114515;

} .navbar ul li ul:hover{ /*{悬浮在按钮上的样式

   background-color:rgb(250, 233, 229); /*鼠标悬浮时按钮的颜色:白色*/
   /*box-shadow:5px 0px 0px 0px rgb(241, 157, 138); 阴影颜色与位置：深红色，右边*/
   border-radius: 8px; /*按钮圆角，为保证过渡效果而加的*/
   /*transition:all 0.2s; 0.2秒的过渡*/

} .navbar ul li:hover ul{

   display: block;
   /*opacity: 100%;*/ /*基于透明度的过渡*/
   max-height: 500px; /*基于高度的过渡*/
   opacity: 1;
   transition: opacity 0.1s linear;
   padding: 0px 0px 0px 0px;/*拒绝继承值*/  
   box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.3);
   /*box-shadow:5px 0px 0px 0px rgb(241, 157, 138);阴影颜色与位置：深红色，右边*/

} .navbar ul li ul li{

   border-radius:0px;

}

.navbar ul li ul li a {

   /*text-align:center;*/
   text-align:left;
   
   padding: 0px;/*拒绝继承值*/
   padding-left:20px;
   box-shadow: none;/*拒绝继承值*/
   width: 260px;
   color: #999faa !important; /*字体颜色*/
   line-height: 36px;/*调整文字到按钮居中的位置
   这行代码改掉后果自负*/
   

} .navbar ul li ul li:hover a{

   color:white !important; /*颜色过渡*/ 

}

1. tlogo, .tlogo{

   margin-top: 17px;
   margin-left: 20px;/*8px*/
    z-index: 514 !important;
    left: 0;
   position: absolute;

}

1. tlogo.stick, .tlogo.stick{

   margin-top:30px;
   top:0;
   margin-left: 10px;
   z-index: 115 !important;
   left: 0;
   position:fixed;

}

1. plogo, .plogo{

   margin-top: 17px;
   margin-left: 20px;/*8px*/
    z-index: 514 !important;
    left: 0;
   position: absolute;

}

1. plogo.stick, .plogo.stick{

   margin-top:10px;
   top:0;
   margin-left: 40px;
   z-index: 115 !important;
   left: 0;
   position:fixed;

}

.topbar{

   margin-top:40.5px;
   margin-left: -25px;
   margin-bottom: -18px;
   height: 8px;
   width: 102.15%;
   background-color:#d3e3f0;
   position:relative;
   z-index:3;
   /* top:0;*/

}