Team:Imperial College/Templates/Navigation3

From 2013.igem.org

Revision as of 18:00, 18 August 2013 by Rkelwick (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500); /* 2f4b87 */ /* 2f4b87 */ /* #1f325d */ /* Menu CSS */#cssmenu { 

 width: auto;

}

  1. cssmenu,
  2. cssmenu ul,
  3. cssmenu ul li,
  4. cssmenu ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Source Sans Pro', sans-serif;
 font-weight: 500;
 font-size: 16px;
 color: #ffffff;
 -webkit-transition: all ease .3s;
 -o-transition: all ease .3s;
 -moz-transition: all ease .3s;
 -ms-transition: all ease .3s;
 transition: all ease .3s;

}

  1. cssmenu:before,
  2. cssmenu:after,
  3. cssmenu > ul:before,
  4. cssmenu > ul:after { 
 content: ;
 display: table;

}

  1. cssmenu:after,
  2. cssmenu > ul:after { 
 clear: both;

}

  1. cssmenu a { 
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

}

  1. cssmenu ul { 
 background: #5a76ad;
 border-radius: 3px;
 border: 1px solid #2b4479;
 border: 1px solid #465e8e;
 -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
 -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
 -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
 -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
 box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);

}

  1. cssmenu ul > li { 
 float: left;
 list-style: none;

}

  1. cssmenu ul > li > a { 
 display: block;
 text-decoration: none;
 padding: 15px 44px;
 position: relative;

}

  1. cssmenu ul > li > a:hover { 
 background: #465e8e;
 -webkit-box-shadow: inset 0 0 1px #35486c;
 -o-box-shadow: inset 0 0 1px #35486c;
 -moz-box-shadow: inset 0 0 1px #35486c;
 -ms-box-shadow: inset 0 0 1px #35486c;
 box-shadow: inset 0 0 1px #35486c;
 -webkit-transition: all ease .3s;
 -o-transition: all ease .3s;
 -moz-transition: all ease .3s;
 -ms-transition: all ease .3s;
 transition: all ease .3s;

}

  1. cssmenu ul > li > a:hover:before { 
 content: ;
 z-index: 2;
 position: absolute;
 border: 1px solid white;
 border-top: 0;
 border-bottom: 0;
 border-right: 0;
 width: 100%;
 height: 100%;
 top: 0;
 left: -1px;
 opacity: .2;

}

  1. cssmenu ul > li > a:hover:after { 
 content: ;
 z-index: 2;
 position: absolute;
 border: 1px solid white;
 border-top: 0;
 border-bottom: 0;
 border-left: 0;
 width: 100%;
 height: 100%;
 top: 0;
 right: -1px;
 opacity: .2;

}

  1. cssmenu > ul > li > ul { 
 opacity: 0;
 visibility: hidden;
 position: absolute;

}

  1. cssmenu > ul > li:hover > ul { 
 opacity: 1;
 visibility: visible;
 position: absolute;
 border-radius: 0 0 3px 3px;
 -webkit-box-shadow: none;
 -o-box-shadow: none;
 -moz-box-shadow: none;
 -ms-box-shadow: none;
 box-shadow: none;

}

  1. cssmenu > ul > li > ul { 
 width: 200px;
 position: absolute;

}

  1. cssmenu > ul > li > ul > li { 
 float: none;
 position: relative;

}

  1. cssmenu > ul > li > ul > li > ul { 
 opacity: 0;
 visibility: hidden;
 position: absolute;

}

  1. cssmenu > ul > li > ul > li:hover > ul { 
 opacity: 1;
 visibility: visible;
 position: absolute;

}

  1. cssmenu > ul > li > ul > li > ul { 
 left: 200px;
 top: 1px;
 width: 200px;

}

  1. cssmenu > ul > li > ul > li > ul > li { 
 float: none;

}

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Navigation3"