Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
 +
<style type="text/css">
 +
 +
@charset "UTF-8";
@charset "UTF-8";
Line 40: 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 53: 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 69: 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 82: 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 123: 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 137: 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 167: Line 171:
}
}
}
}
 +
</style>
 +
</html>

Latest revision as of 04:55, 6 August 2012