testing/MCTXWeb/public_html/static/nav-menu.css

   1 /*
   2     Document   : nav-menu
   3     Created on : 21/09/2013, 8:33:30 PM
   4     Author     : Jeremy Tan
   5     Description:
   6         Navigation menu styling.
   7         Background colour: #2A2A2A
   8         Highlight colour: #f2f2f2
   9         Normal text colour: #bbbbbb
  10 */
  11
  12 /** Easing **/
  13 .nav-menu {
  14   transition: all 0.2s ease 0s;
  15 }
  16
  17 /** Main menu list styling **/
  18 .nav-menu ul {
  19   list-style: none outside none;
  20   margin: 0;
  21   padding-left: 0;
  22   text-align: right;
  23 }
  24
  25 /** Menu item styling **/
  26 .nav-menu li {
  27   display: inline-block;
  28   position: relative;
  29 }
  30
  31 /** Link styling **/
  32 .nav-menu a {
  33   background-color: #2A2A2A;
  34   border-radius: 2px;
  35   border: 1px solid #444444;
  36   color: #BBBBBB;
  37   display: inline-block;
  38   margin: 0.1em;
  39   padding: 0.2em 2em;
  40   text-decoration: none;
  41   transition: all 0.2s ease 0s;
  42 }
  43
  44 /** Highlight currently hovered-over item **/
  45 .nav-menu li:hover > a {
  46   background-color: #f2f2f2;
  47   color: #2a2a2a;
  48 }
  49
  50 /** Display submenu when hovering over list item **/
  51 .nav-menu ul li:hover > ul {
  52   display: block;
  53 }
  54
  55 /** Submenu styling **/
  56 .nav-menu ul ul {
  57   background-color: #2A2A2A;
  58   border-radius: 2px;
  59   box-shadow: 1px 1px 1px #2A2A2A;
  60   display: none;
  61   left: 0;
  62   padding: 0.25em 0.5em;
  63   position: absolute;
  64   text-align: left;
  65   z-index: 10;
  66 }
  67
  68 /** Submenu link styling **/
  69 .nav-menu ul ul a {
  70   width: 11em;
  71   padding: 0.25em 0.5em;
  72 }
  73
  74 /**
  75   Style of menu:
  76   <div class="nav-menu">
  77     <ul class="menu">
  78       <li><a href="#">Link 1</a></li>
  79       <li><a href="#">Link 2</a></li>
  80       <li>
  81         <a href="#">Link 3</a>
  82         <ul class="submenu">
  83           <li><a href="#">Sub-link 1</a></li>
  84           <li><a href="#">Sub-link 2</a></li>
  85         </ul>
  86       </li>
  87     </ul>
  88   </div>
  89 */