Spry Menues und Kaskaden...

[sounddesigner]

Juten Tach,
og Thema macht mir einiges Kopfzerbrechen obwohl in den Kommentaren ja eigentlich alles drin steht.
Ich habe in einem vertikalen Spry Menu bei den Untermenüs selbstgebaute transparente Kästen mit abgerundeten Ecken. Soweit so gut. Wo mache ich nun folgendes:

- Untermenü-Kasten inklusive Einträge nach unten zu verschieben
- vertikale Abstände der Wörter nur im Untermenü verändern
- Abstand NUR des obersten Eintrags vom Kastenrand verändern

?

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	list-style-type: none;
	font-size: 18px;
	cursor: default;
	width: 100px;
	font-family: "Comic Sans MS", cursive;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-style: italic;
}
/* 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 same fixed width as parent */
ul.MenuBarVertical li
{
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 100px;
	z-index: 2;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	left: -1000em;
	top: 0px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 100px;
	width: 220px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 100px;
	z-index: 5;
}
/* untermenu groeße und abstände */
ul.MenuBarVertical ul li
{
	width: 220px;
	font-size: 14px;
	font-family: "Comic Sans MS", cursive;
	margin-top: -36px;
	margin-right: 0px;
	margin-left: -2px;
	margin-bottom: 0px;
	top: 18px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom:0px;
	padding-left: 0px;
	font-style: italic;
	z-index: 5;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* menu container */
ul.MenuBarVertical
{
	z-index: 5;
}
/* untermenu kasten */
ul.MenuBarVertical ul
{
	background-image: url(../images/oben2.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left:0px;
	margin-top: 0px;
	background-attachment: scroll;
	z-index: 5;
}
/* abstaende hauptmenu */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	color: #FFF;
	text-decoration: none;
	top: 10px;
	padding-top: 2px;
	margin-top: 8px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 10px;
	bottom: 1011px;
	padding-bottom: 10px;
	z-index: 5;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	color: #FFF;
	z-index: 6;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	color: #00F;
	z-index: 7;

.unten {
	background-image: url(../images/unten.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
	

/*******************************************************************************

 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.MenuBarVertical a.MenuBarItemSubmenu
{
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 8;
}

/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(../images/button1.png);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 9;
}

Die Kommentare sind natürlich inzwischen falsch, am liebsten wäre mir ja wenn ein edler Spender diese durch sinnvolle ersetzen würde...

".unten" ist mein Ansatz die untere Kante des Kastens richtig anzulegen.
Die Z- Indexe sind überflüssig und müssen hier nicht beachtet werden, das war ein fehlgeleiteter Versuch den IE in den Griff zu bekommen...


Ich denke dass es mir am grundsätzlichen Verständnis der Hierarchien bei css mangelt, würde die Nuss gerne gleich anhand meiner Versuchsseite knacken.
Wer Lust hat ist eingeladen

 

[fexx]

AW: Spry Menues und Kaskaden...

dann zeig doch mal deine versuchsseite

 

[sounddesigner]

AW: Spry Menues und Kaskaden...

ich wollte das eigentlich noch nicht im Netz haben, daher nehm ichs recht bald wieder runter aber hier:


So wie das Menü im Moment aufgebaut ist liegt die Fläche die beim hoovern anspricht deutlich über dem eigentlichem Wort. Sieht man jetzt hier noch nicht, ist aber dem Kenner sicherlich vom Code her klar...daher meine Frage.