Return to Menu Tutor Click Here

                       *************** Please Read First **************
                        This menu will not work correctly with the Carbonite theme. 
                           ***  Update: might work in Carbonite theme now ***

                        Note: This is just a starting point, it will need to be 
                                  tweaked for width's, positions and colors. etc.
                                  Some elements might not be used and some are
                                  still unknown.

                                  The navBar at the top of this page uses this code
                                  with different color combinations so they can 
                                  easily be found below.

                                  If you have the Webdeveloper extension for Firefox
                                  you can play with the CSS and HTML settings and see
                                  in real time how it effects the navBar above.
                                  Firefox webpage
                                  Web Developer Extension webpage


This code goes in your CSS.


/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

            /* Common Styling */
.menu {
      position: relative;
      display: block;
      z-index: 99;
      padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
      height: 20px;   /* menu container (div .menu) */
      width: 616px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
      margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
      padding: 10px 0px 10px 0px;  /* this effects menu centering if too big */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

.menu ul li {
   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
      float:left;    /* WARNING: float right reverses menu */
      position:relative !important;   /*  ***** Carbonite fix ***** */
}

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      font-size: 1em;         /* main buttons */
      color: black ;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: 100px;           /* main box width */
      height: 20px;           /* main box height */
      border: 1px solid  red;  /* start your design with borders on, easier to position DD's & FO's */
      border-width: 1px 1px 1px 1px;
      background: #00ff00;    /* main button color */
      padding-left: 0px;
      line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
      width: 104px; w\idth: 104px;      /* IE main button */
}

.menu ul li ul {
      display: none;}

       /*                             */
       /* Specific to Non-IE browsers */
       /*                             */

.menu ul li:hover a { 
      color: blue;       /* main when hover DD */
      background: white;  /* main when hover DD */
}

.menu ul li:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      top: -4px;            /* FF DD up down */
      margin-top: 17px;     /* FF main mouse active vertical */
      left: 0px;            /* FF DD right left */
      width: 104px;         /* unknown */
}

.menu ul li:hover ul li ul {
      display: none;
}

.menu ul li:hover ul li a {
      display: block;
      background: yellow;  /* DD FO non-hover */
      color: green;           /* DD FO non-hover */
      height: auto;
      line-height: 20px;      /* DD FO box height */
      padding: 0px 0px;
      width: 100px;            /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
      background: red;     /* DD FO hover */
      color: white;      /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
      display: block;
      position: absolute;
      left: 102px;           /* FF FO right left  */
      top: -27px;            /* FF FO up down  */
      width: 146px;          /* FF FO box width */
}

      /*                             */
      /*   Specific to IE browsers   */
      /*                             */

.menu ul li a:hover {
   /* text-decoration: none;  */  /* might be needed */
      color: blue;               /* main hover */
      background:yellow;        /* main hover */
}

.menu ul li a:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      top: 2px;                /* DD container up down */
      background: none;        /* gets rid of DD container */
      margin-top: 7px;         /* DD container up down */
      left: 0px;               /* DD right left */
}

.menu ul li a:hover ul li a {
      display: block;
      background: white;        /* IE DD color non-hover */
      color: red;               /* IE DD color non-hover */
      height: auto;
      line-height: 20px;        /* IE DD FO box height */
      padding: 0px; 
      width: 145px;             /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height: 0;
      width: 0;
}

.menu ul li a:hover ul li a:hover {
      background: blue;                  /* DD FO hover includes menu 6 */
      color: gold;                   /* DD FO hover includes menu 6  */
}

.menu ul li a:hover ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: #000000;                /*   unknown       */
         left: 147px;                   /*   FO right left */
} 

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
         width: 125px; 
         w\idth: 139px;
}

    /* another hack for IE5.5 */

* html .menu ul ul {
         top: 30px;
         t\op: 31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
.menu table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html .menu ul ul a {
         width: 125px;             /* unknown */
         w\idth: 104px;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
         visibility:visible; 
}

          /* keep the 3rd level hidden when you 
             hover on 1st level list OR link */
.menu ul a:hover ul ul,  /* IE */
.menu ul:hover ul ul {   /* FF */
         visibility:hidden;
}

          /* keep the 4th level hidden when you 
             hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul,  /* IE */
.menu ul li:hover ul li:hover ul ul {     /* FF */
         visibility:hidden;
}

         /* make the 3rd level visible when you hover 
            over 2nd level list OR link */
.menu ul a:hover ul a:hover ul,   /* IE */
.menu ul:hover ul:hover ul {      /* FF */
         visibility:visible;
}

         /* make the 4th level visible when you 
           hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul,   /* IE */
.menu ul li:hover ul li:hover ul li:hover ul {        /* FF */
         visibility:visible;
}

 /* ==== END NAVBAR CODE ==== */ 






       /* ============    Advanced option     =============== */
       /*   The following code allows the right most menu     */
       /*   item dropdown flyouts to fly out to the left.     */
       /* Also need to assign the classes in the header code. */
       /*  <ul class="main6DD"> and <ul class="main6FO">      */
       /*    i.e   <ul class="main6FO">                       */
       /*            <li><a href="http .......                */
       /*          </ul>  <!--[if .......                     */
       /* =================================================== */

         /* FF right most menu box dropdown/flyout */
.menu ul li:hover ul.main6DD li a {
      display:block;
      background: gray;        /* DD FO non-hover FF */
      color: white;            /* DD FO non-hover FF */
      height: auto;
      line-height: 20px;       /* DD FO box height */
      padding: 0px 0px;
      width: 100px; }          /* DD box width */

          /* IE right most menu box dropdown/flyout */
.menu ul li a:hover ul.main6DD  li a, 
.menu ul li a:hover ul.main6FO  li a, {
      width: 100px;              /* IE DD FO box */
      background: gray;       /* DD FO non-hover IE */
      color: white; }           /* DD FO non-hover IE */

          /* right most menu box dropdown */
.menu ul li:hover ul.main6DD {
      left: 0px;}               /* FF DD move right left */
.menu ul li a:hover ul.main6DD {
      left: 0px;}               /* IE DD move right left  */

          /* right most menu box flyout */
.menu ul li:hover ul li:hover ul.main6FO {
      left: -102px;}             /* FF FO move right left  */
.menu ul li a:hover ul li a:hover ul.main6FO {
      left: -102px;}             /* IE FO move right left  */

.menu ul li:hover ul.main6DD li a:hover {
      background: red;          /* DD FO hover FF */
      color: white;}            /* DD FO hover FF */


 /* ==== END NAVBAR OPTIONAL CSS CODE ==== */ 



Key: Do not add to CSS
---------------------------------------
Abreviations: |  DD = Dropdown
 used above   |  FO = Flyout
 in comments  |  IE = Internet Explorer
              |  FF = Firefox

Return to Menu Tutor Click Here