"
Team:XMU-China/CSS/SpryMenuBarHorizontal/css
From 2012.igem.org
(Difference between revisions)
| (3 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| - | <html> | + | <html> |
| - | <style type="text/css"> | + | <style type="text/css"> |
| + | |||
| + | |||
@charset "UTF-8"; | @charset "UTF-8"; | ||
| Line 42: | Line 44: | ||
} | } | ||
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ | /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ | ||
| - | ul.MenuBarHorizontal ul | + | ul.MenuBarHorizontal li ul |
{ | { | ||
margin: 0; | margin: 0; | ||
| Line 55: | Line 57: | ||
} | } | ||
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ | /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ | ||
| - | ul.MenuBarHorizontal ul.MenuBarSubmenuVisible | + | ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible |
{ | { | ||
left: auto; | left: auto; | ||
} | } | ||
/* Menu item containers are same fixed width as parent */ | /* Menu item containers are same fixed width as parent */ | ||
| - | ul.MenuBarHorizontal ul li | + | ul.MenuBarHorizontal li ul li |
{ | { | ||
width: 8.2em; | width: 8.2em; | ||
} | } | ||
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ | /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ | ||
| - | ul.MenuBarHorizontal ul ul | + | ul.MenuBarHorizontal li ul ul |
{ | { | ||
position: absolute; | position: absolute; | ||
| Line 71: | Line 73: | ||
} | } | ||
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ | /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ | ||
| - | ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible | + | ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible |
{ | { | ||
left: auto; | left: auto; | ||
| Line 84: | Line 86: | ||
/* Submenu containers have borders on all sides */ | /* Submenu containers have borders on all sides */ | ||
| - | ul.MenuBarHorizontal ul | + | ul.MenuBarHorizontal li ul |
{ | { | ||
border: 1px solid #CCC; | border: 1px solid #CCC; | ||
| Line 125: | Line 127: | ||
} | } | ||
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ | /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ | ||
| - | ul.MenuBarHorizontal ul a.MenuBarItemSubmenu | + | ul.MenuBarHorizontal li ul a.MenuBarItemSubmenu |
{ | { | ||
background-image: url(SpryMenuBarRight.gif); | background-image: url(SpryMenuBarRight.gif); | ||
| Line 139: | Line 141: | ||
} | } | ||
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ | /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ | ||
| - | ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover | + | ul.MenuBarHorizontal li ul a.MenuBarItemSubmenuHover |
{ | { | ||
background-image: url(SpryMenuBarRightHover.gif); | background-image: url(SpryMenuBarRightHover.gif); | ||
| Line 169: | Line 171: | ||
} | } | ||
} | } | ||
| - | + | </style> | |
| - | </style> | + | </html> |
| - | <html> | + | |
Latest revision as of 04:55, 6 August 2012
