Team:LCG-UNAM-Mexico/menu.css

From 2009.igem.org

Revision as of 19:59, 2 September 2009 by Yoshi genomico (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* 

 Script-Free 3-Level Menu 1.3.4
 www.CesarDaniel.info/Tech/ScriptFree3LevelMenu.html
 
 ...............................................................................................
 
 Sections
 
 * Reset
 * Menu Bar
 * Drop-Down Menus
 * Side Menus
 * Browser Specific
 * Default Colors (Required)
  • /

/*---------------------------------------------------------------------------------------- Reset */ div.MenuBar, div.MenuBar ul, div.MenuBar li, div.MenuBar a, div.MenuBar table, div.MenuBar span { 

 margin: 0;
 border: 0;
 padding: 0;
 z-index: 255;

} div.MenuBar ul li ul.DropDownMenu { 

 display: none; /* Hides all drop-down menus. */

} /* li:hover works in IE7 and FF2. a:hover works in IE6 and FF2. a:hover breaks li:hover in FF2.

  • /

div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu { 

 display: none; /* Hides all side menus. */

} /*------------------------------------------------------------------------------------- Menu Bar */ div.MenuBar { font: 13px Arial, Helvetica, sans-serif; 

 height: 25px; /* Total height 27px. */
  width: 900px;

} div.MenuBar ul li { font: Arial; 

 float: left;
 list-style-type: none !important;
 margin: 0 !important;
 position: relative; /* Sets the positioning context for each drop-down menu. */

} div.MenuBar ul li a { font: Arial; 

 display: block;
 height: 17px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 5em; /* Sets the left space between top-level items. */
 padding-right: 5.1em; /* Sets the right space between top-level items. */
 text-decoration: none !important;

} /*------------------------------------------------------------------------------ Drop-Down Menus */ div.MenuBar ul li:hover ul.DropDownMenu, div.MenuBar ul li a:hover ul.DropDownMenu { font: Arial; 

 display: block;
 width: 13em; /* Drop-down menu width.
                 Use MenuTailor.css to customize. */
 padding: 0px; /* Sets the drop-down menu "effective border" width. */
 position: absolute;
 top: 25px; /* Places the drop-down menu under the menu bar.
               Keep it sync with the menu bar height. */
 left: 0; /* Aligns the drop-down menu to its top-level item. */

} div.MenuBar ul li:hover ul.DropDownMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a { font: Arial; 

 width: 13em; /* Keep it sync with the drop-down menu width.
                 Use MenuTailor.css to customize. */
 padding-left: 0;
 padding-right: 0;

}

ul.DropDownMenu li a span span { font: Arial; 

 float: center; /* Aligns the text (back) to the left. */

} ul.DropDownMenu li a span { 

 display: block;
 padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */
 padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */
 text-align: left; /* Aligns the >> symbol to the right. */

} /*----------------------------------------------------------------------------------- Side Menus */ div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { font: Arial; 

 display: block;
 width: 11em; /* Side menu width.
                 Use MenuTailor.css to customize. */
 padding: 0px; /* Sets the side menu "effective border" width. */
 position: absolute;
 top: 0px; /* Aligns the side menu to its drop-down menu item.
               Keep it sync with the side menu "effective border" width. */
 left: 13em; /* Places the side menu to the right of the drop-down menu.
                Keep it sync with the drop-down menu width.
                Use MenuTailor.css to customize. */

} div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { font: Arial; 

 width: 11em; /* Keep it sync with the side menu width.
                 Use MenuTailor.css to customize. */

} div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span { font: Arial; 

 padding-left: 1.5em; /* Sets the left space of each side menu item. */
 padding-right: 0.5em; /* Sets the right space of each side menu item. */
 text-align: left;

} /*----------------------------------------------------------------------------- Browser Specific */

  • html div.MenuBar { 
 position: relative; /* For IE55 and IE6.
                        Hidden (* html) from non-IE browsers. */

}

  • html div.MenuBar ul li a { 
 float: left; /* For IE55 and IE6.
                 Breaks O9.
                 Hidden (* html) from non-IE browsers. */

}

  • html ul.DropDownMenu li a:hover { 
 cursor: hand; /* For IE55.
                  Hidden (* html) from non-IE browsers. */

} ul.DropDownMenu li a:hover { 

 cursor: pointer; /* For IE6 and IE7.
                     Hidding it (* html) from non-IE browsers breaks IE7! */

}

  • html div.MenuBar a:hover { 
 text-decoration: none; /* For IE55 and IE6.
                           Hidden (* html) from non-IE browsers. */

}

  • html div.MenuBar ul li table,
  • html div.MenuBar ul li table td { 
 border: 0; /* For IE55 and IE6.
               Hidden (* html) from non-IE browsers. */

} /*------------------------------------------------------------------------------- Default Colors */ div.MenuBar { width 900px; 

 background-color: #659D32;
 border-color: #659D32;

} div.MenuBar a { 

   background-color: #659D32; /* Top-level unselected items. */
 color: white;

} div.MenuBar ul li:hover a, div.MenuBar ul li a:hover { 

 background-color: #003300; /* Top-level selected item. */
 color: white;

} /*...............................................................................................*/ div.MenuBar ul li:hover ul.DropDownMenu, div.MenuBar ul li a:hover ul.DropDownMenu { 

 background-color: #659D32; /* Sets the drop-down menu "effective border" color. */

} div.MenuBar ul li:hover ul.DropDownMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a { 

 background-color: #659D32; /* Drop-down menu unselected items.
                            Sets the drop-down menu "effective background" color. */
 color: white;

} div.MenuBar ul li:hover ul.DropDownMenu li:hover a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover { 

 background-color: #003300; /* Drop-down menu selected item. */
 color: white;

} /*...............................................................................................*/ div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { 

 background-color: ButtonShadow; /* Sets the side menu "effective border" color. */

} div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { 

 background-color: #659D32; /* Side menu unselected items.
                            Sets the side menu "effective background" color. */
 color: white;

} div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover { 

 background-color: #003300; /* Side menu selected item. */
 color: white;

} /*-----------------------------------------------------------------------------------------------*/

Retrieved from "http://2009.igem.org/Team:LCG-UNAM-Mexico/menu.css"