Difference between revisions of "Team:SPSingapore/CSS/menu"

Revision as of 20:07, 18 September 2015

/*TOP LOGO*/

.logo { width: 100%; background-color: black; background-size: 100%;

       background-image: url("");

background-position: center; background-repeat: no-repeat; border-bottom: 2px solid red;

       height:100px;

}

/* Remove Title Heading */

.firstHeading { display:none; }

/*CSS MENU*/

cssmenu {

 background: MidnightBlue ;
 width: auto;

}

cssmenu ul {

 list-style: none;
 margin: 0;
 padding: 0;
 line-height: 1;
 display: block;
 zoom: 1;

}

cssmenu ul:after {

 content: " ";
 display: block;
 font-size: 0;
 height: 0;
 clear: both;
 visibility: hidden;

}

cssmenu ul li {

 display: inline-block;
 padding: 0;
 margin: 0;

}

cssmenu.align-right ul li {

 float: right;

}

cssmenu.align-center ul {

 text-align: center;

}

cssmenu ul li a {

 color: #ffffff;
 text-decoration: none;
 display: block;
 padding: 15px 25px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 14px;
 position: relative;
 -webkit-transition: color .25s;
 -moz-transition: color .25s;
 -ms-transition: color .25s;
 -o-transition: color .25s;
 transition: color .25s;

}

cssmenu ul li a:hover {

 color: red;

}

cssmenu ul li a:hover:before {

 width: 100%;

}

cssmenu ul li a:after {

 content: "";
 display: block;
 position: absolute;
 right: -3px;
 top: 19px;
 height: 6px;
 width: 6px;
 background: #ffffff;
 opacity: .5;

}

cssmenu ul li a:before {

 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 3px;
 width: 0;
 background: red;
 -webkit-transition: width .25s;
 -moz-transition: width .25s;
 -ms-transition: width .25s;
 -o-transition: width .25s;
 transition: width .25s;

}

cssmenu ul li.last > a:after,
cssmenu ul li:last-child > a:after {

 display: none;

}

cssmenu ul li.active a {

 color: red;

}

cssmenu ul li.active a:before {

 width: 100%;

}

cssmenu.align-right li.last > a:after,
cssmenu.align-right li:last-child > a:after {

 display: block;

}

cssmenu.align-right li:first-child a:after {

 display: none;

} @media screen and (max-width: 768px) {

 #cssmenu ul li {
   float: none;
   display: block;
 }
 #cssmenu ul li a {
   width: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-bottom: 1px solid #fb998c;
 }
 #cssmenu ul li.last > a,
 #cssmenu ul li:last-child > a {
   border: 0;
 }
 #cssmenu ul li a:after {
   display: none;
 }
 #cssmenu ul li a:before {
   display: none;
 }

}

body { margin: 0px 0; padding: 0; text-align: center; font: 0.8em/1.3 Verdana, Arial, Helvetica, Sans-serif; background-color: black !important; }

.tablelist{ margin-left: 10%; margin-right:10%; border-collapse: collapse; margin-top:0%; font-size:15px; }

/* Footer */

footer1 {

float: left;

   width: 100%;
   padding: 4px 0 20px;

background:white; border-top:5px solid blue; }

footer1 .left_sec {

   float: left;
   width: 500px;
   padding: 0 0 0 10px;

}

footer1 .right_sec {

   float: right;
   width: 400px;
   padding: 0 23px 0 0;

}

footer1 .right_sec p {

   text-align: right!important;

}

footer1 .right_sec ul {

   float: right;
   width: auto;

}

footer1 p {

   float: left;
   width: 100%;
   color: #111434;
   font-size: 12px!important;
   font-size: .76em;
   line-height: 1.3em;
   font-family: Arial, Helvetica, sans-serif;

}

footer1 ul {

   margin-top: -10px;
   float: left;
   width: 100%;
   list-style: none;
   padding: 2px 60px 0;

}

footer1 ul li {

   float: left;
   width: auto;
   padding: 0 23px 0 4px;
   background: url(../images/footer_navi_sep.gif) no-repeat right 3px;

}

footer1 ul li.last {

   background: 0 0;
   padding-right: 0;

}

footer1 ul li a {

   float: left;
   width: auto;
   color: #111434;
   text-decoration: none;
   font-size: 12px!important;
   font-size: .76em;
   line-height: 1.3em;
   font-family: Arial, Helvetica, sans-serif;

}

footer1 ul li a:hover {

   text-decoration: underline;

}

print-section {

   display: none;

}

/* Drop down Menu */

cssmenu li ul {

   display:none;

position:absolute; opacity:0.8; }

cssmenu ul li:hover ul{

   display:block;
   background:midnightblue;

height:auto; width:200px; style:none; }

cssmenu li ul li{

   clear:both;

border-style:none; }

cssmenu ul li ul li a:after {

 content: "";
 display: block;
 height: 0px;
 width: 0px;

}

cssmenu ul li ul li a:hover {

 color: red;

}

cssmenu ul li ul li a:before {

 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 0px;
 width: 0;
 background: red;
 -webkit-transition: width .25s;
 -moz-transition: width .25s;
 -ms-transition: width .25s;
 -o-transition: width .25s;
 transition: width .25s;

}

@@ Line 21: / Line 21: @@
    background: MidnightBlue ;
    width: auto;
-  font: 0.4em/1.3 Verdana, Arial, Helvetica, Sans-serif;
 }
 #cssmenu ul {