Cor de fundo - Spry Menu
Gente, quero deixar só a 1ª linha do menu transparente + naum sei como fazer isso!!! Alguém me ajuda?? Todo esse código foi o próprio Dreamweaver que criou. Eu fuceeeeeeeeeei, fiz várias alterações, + isso eu naum achei onde mudar... :S
Menu
<ul id="MenuBar1" class="MenuBarHorizontal"> <li background="layout_r2_c2.gif"><a class="MenuBarItemSubmenu" href="#">Item 1</a> <ul> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Item 3.2</a></li> <li><a href="#">Item 3.3</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#" class="MenuBarItemSubmenu">Item 6</a> <ul> <li><a href="#">Item 6.1</a></li> <li><a href="#" class="MenuBarItemSubmenu">Item 6.2</a> <ul> <li><a href="#">Item 6.2.1</a></li> <li><a href="#">Item 6.2.2</a></li> </ul> </li> <li><a href="#">Item 6.3</a></li> </ul> </li></ul>
SpryMenu.css
@charset "UTF-8";/ SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 // Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. //***************************************************************************** LAYOUT INFORMATION: describes box model, positioning, z-order *****************************************************************************// The outermost container of the Menu Bar, an auto width box with no margin or padding /ul.MenuBarHorizontal{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; position:absolute; top: 4.7em; left: 12.9em;}/ Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html /ul.MenuBarActive{ z-index: 1000;}/ Menu item containers, position children relative to this container and are a fixed width /ul.MenuBarHorizontal li{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; float: left; width: 8.75em;}/ 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{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; position: absolute; left: -1002em; width: 8.6em;}/ 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{ left: 0em; width: 8.6em;}/ Menu item containers are same fixed width as parent /ul.MenuBarHorizontal ul li{ width: 8.6em;}/ Submenus should appear slightly overlapping to the right (95%) and up (-5%) /ul.MenuBarHorizontal ul ul{ position: absolute; margin: 0 0 0 100%;}/ 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{ left: auto; top: 0;}/***************************************************************************** DESIGN INFORMATION: describes color scheme, borders, fonts *****************************************************************************// Submenu containers have borders on all sides /ul.MenuBarHorizontal ul{ border: 1px solid #EADACF;}/ Menu items are a light gray block with padding and no text decoration /ul.MenuBarHorizontal a{ display: block; cursor: pointer; padding: 0.5em 0.75em; text-decoration: none; background-color: #FDF2E1; color: #663200;}/ Menu items that have mouse over or focus have a blue background and white text /ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color:#FCE0BA; color: #663200;}/ Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text /ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color:#FEE9CB; color: #663200;}/***************************************************************************** SUBMENU INDICATION: styles if there is a submenu under a given menu item *****************************************************************************// 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 a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 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{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 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 a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 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{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%;}/***************************************************************************** BROWSER HACKS: the hacks below should not be changed unless you are an expert *****************************************************************************// HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe /ul.MenuBarHorizontal iframe{ position: absolute; z-index: 1010;}/ HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing /@media screen, projection{ ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; float: left; background: #FFF; }}
Discussão (3)
Carregando comentários...