Template:Hong Kong HKUST/nav.css/CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

  1. cssmenu {
 font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
 font-size: 10px;
 line-height: 15px;
 text-transform: uppercase;
 text-align: left;

}

  1. cssmenu > ul {
 width: auto;
 list-style-type: none;
 padding: 0;
 margin: 0;
 background: #ffffff;
 border: 1px solid #ece6e8;
 border-bottom: 3px solid #d9ced2;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -o-border-radius: 2px;
 border-radius: 2px;

}

  1. cssmenu > ul li#responsive-tab {
 display: none;
 /* Hide for large screens */

}

  1. cssmenu > ul li {
 display: inline-block;
 *display: inline;
 zoom: 1;

}

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

}

  1. cssmenu > ul li.has-sub {
 position: relative;

}

  1. cssmenu > ul li.has-sub:hover ul {
 display: block;

}

  1. cssmenu > ul li.has-sub ul {
 display: none;
 width: 250px;
 position: absolute;
 margin: 0;
 padding: 0;
 list-style-type: none;
 background: #ffffff;
 border: 1px solid #ece6e8;
 border-bottom: 3px solid #d9ced2;
 border-top: 0 none;

}

  1. cssmenu > ul li.has-sub ul li {
 display: block;

}

  1. cssmenu > ul li.has-sub > a {
 background-image: url('images/caret.png');
 background-repeat: no-repeat;
 background-position: 90% -95%;

}

  1. cssmenu > ul li.has-sub > a.active,
  2. cssmenu > ul li.has-sub > a:hover {
 background: purple url('images/caret.png') no-repeat;
 background-position: 90% 195%;

}

  1. cssmenu > ul li a {
 display: block;
 padding: 12px 24px 11px 24px;
 text-decoration: none;
 color: #747474;
 text-shadow: 0px 1px 0px #fff;

}

  1. cssmenu > ul li a.active,
  2. cssmenu > ul li a:hover {
 background: purple;
 color: #fff;
 text-shadow: 0px 1px 0px #000;

} @media (max-width: 600px) { 

 #cssmenu > ul {
   width: 100%;
 }
 #cssmenu > ul li#responsive-tab {
   display: block;
 }
 #cssmenu > ul li#responsive-tab a {
   background: url('images/menu.png') no-repeat;
   background-position: 95% -35%;
 }
 #cssmenu > ul li#responsive-tab a:hover {
   background-color: purple;
   background-position: 95% 135%;
 }
 #cssmenu > ul li {
   display: none;
 }
 #cssmenu > ul li.right {
   float: none;
 }
 #cssmenu > ul li.has-sub {
   position: relative;
 }
 #cssmenu > ul li.has-sub ul {
   display: block;
   position: static;
   width: 100%;
   background: #ffffff;
   border: 0 none;
 }
 #cssmenu > ul li.has-sub ul li {
   display: block !important;
 }
 #cssmenu > ul li.has-sub ul li a span {
   display: block;
   padding-left: 24px;
 }
 #cssmenu > ul li.has-sub > a {
   background-image: none;
 }

} /* Make sure they show even if hidden in mobile view by JS */ @media (min-width: 600px) { 

 #cssmenu > ul > li.collapsed {
   display: inline-block !important;
   *display: inline;
   zoom: 1;
 }
 #cssmenu > ul ul li.collapsed {
   display: block !important;
 }

}