Difference between revisions of "Team:NAIT Edmonton/Trial12"

Line 39: Line 39:
 
</div>
 
</div>
  
 +
<style type="text/css">
  
−
     <div class="header_left">
+
.navigation {
 +
            width:600px;
 +
        }
 +
        .navigation ul{
 +
        /* positioning */
 +
        position:relative;
 +
            z-index:1000;
 +
        /* remove the dots next to list items: */
 +
            list-style:none;
 +
        /* get rid of any default or inherited margins and padding: */
 +
            margin:0;
 +
            padding:0;
 +
           
 +
        /* styling: */
 +
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 +
            font-weight: normal;
 +
            font-size: 15px;
 +
        }
 +
       
 +
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
 +
        .navigation > ul > li {
 +
        /* positioning */
 +
            position: relative;
 +
            float: left;
 +
        /* styling: */
 +
            margin-right: 10px;
 +
        }
 +
        .navigation > ul > li > a {
 +
        /* positioning */
 +
            display:block;
 +
        /* styling: */
 +
            background-color: #2c2c2c; /*  grey */
 +
            padding:8px 14px;
 +
            text-decoration:none;
 +
            color:#aaaaaa;
 +
           
 +
        }
 +
        .navigation > ul > li > a:hover{
 +
        /* styling: */
 +
            background-color:#666666; /* grey */
 +
            color:#eeeeee; /* light grey */
 +
 
 +
.navigation ul ul{
 +
           
 +
            background-color:#e6056f; /* remove. this is for illustration purposes only */
 +
            width:340px; /* you need a width to accommodate tertiary menus */
 +
           
 +
            position:absolute;
 +
            z-index:100;
 +
           
 +
            height: 0;
 +
            overflow: hidden;
 +
 
 +
-webkit-transition: height 0.3s ease-in;
 +
            -moz-transition: height 0.3s ease-in;
 +
            -o-transition: height 0.3s ease-in;
 +
            -ms-transition: height 0.3s ease-in;
 +
            transition: height 0.3s ease-in;
 +
        }
 +
       
 +
 
 +
        /* don't display tertiary box yet */
 +
        .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
 +
            height:0;
 +
           
 +
        }
 +
        /* tertiary drop-down box */
 +
        .navigation ul ul ul{
 +
            left:170px;
 +
            width:170px;
 +
        }
 +
       
 +
        .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
 +
        .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
 +
            height:220px; /* need a height to accommodate any tertiary menus */
 +
        }
 +
       
 +
        /* drop-down item styles */
 +
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
 +
       
 +
        .navigation ul ul li{
 +
            background-color:#eaeaea; /* grey */
 +
            width:170px;
 +
-webkit-transition: background-color 0.3s ease;
 +
            -moz-transition: background-color 0.3s ease;
 +
            -o-transition: background-color 0.3s ease;
 +
            -ms-transition: background-color 0.3s ease;
 +
            transition: background-color 0.3s ease;
 +
        }
 +
       
 +
        .navigation ul ul li:hover {
 +
            background-color:#999; /* grey */
 +
        }
 +
       
 +
        .navigation ul ul li a {
 +
            display:block;
 +
            text-decoration:none;
 +
            margin:0 12px;
 +
            padding:5px 0;
 +
            color:#4c4c4c; /* grey */
 +
        }
 +
        .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
 +
            color:#ffffff; /* white */
 +
        }
 +
 
 +
</style>
 +
 
 +
 
 +
     <div class="testnav">
 
         <ul>
 
         <ul>
 
                  
 
                  

Revision as of 00:50, 31 July 2015

Team NAIT 2015