[hannah]

Hallo,
ich habe ein Problem mit einem Dropdown Menu in CSS.
und zwar habe ich nach der Sliding Doors Technik in der obersten (horizontalen) Ebene
die Links mit einem Span-Tag umgeben und den Links und den Spans jeweils Hintergrundbilder zugeordnet. Jetzt das Problem: im FF werden diese Bilder auch für die Unterebenen verwendet, dort möchte ich sie aber nicht mehr haben. Kann mir da jemand helfen ? ich verzweifel schon ziemlich daran.

hier das CSS:

#nav {font-size:0.8em; position:absolute; bottom:0px;}
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 9.5em;
}

#nav li { /* all list items */
	float: left;
	width: 9.5em;/* width needed or else Opera goes nuts */
white-space: nowrap;

}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 9.5em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1.2em 0 0 9.5em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

ul.first li a {
	background: url("bilder/rechts.jpg") no-repeat 100% 0px;
	color: #000;
	padding:2px 0;
	text-decoration: none;
}

ul.first li a span {
	background: url("bilder/links.jpg") no-repeat;
	padding:2px 1em;
}
ul li a.active {background:url(bilder/rechts_active.jpg) no-repeat 100% 0; color:#fff }
ul li a span.active  {background:url(bilder/links_active.jpg) no-repeat}

ul.second, ul.third {border:#CCCCCC 1px solid; background:#fff}
ul.second li, ul.third li {border-bottom:#ccc 1px solid; background:#fff;}
ul.second li a, ul.second li a span, {background:#FFFFFF none; color:#861d2b; padding:0 1em;}
ul.third li a, ul,third li a span {background:#fff none; color:861d2b; padding:0 1em;}

und hier die Liste:

<ul id="nav" class="first"> <li><a href="#" class="active"><span class="active">Thema 1</span></a> <ul class="second"> <li><a href="#">Thema 1.1 </a></li> <li><a href="#">Thema 1.2 </a> <ul class="third"> <li><a href="#">Thema 1.2.1 </a></li> <li><a href="#">Thema 1.2.2 </a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Thema 2</span></a> <ul class="second"> <li><a href="#">Thema 2.1 </a> <ul class="third"> <li><a href="#">Thema 2.1.1</a></li> <li><a href="#">Thema 2.1.2 </a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Thema 3</span></a></li> <li><a href="#"><span>Thema 4</span></a> <ul class="second"> <li><a href="#">Thema 4.1</a></li> </ul> </li> </ul>

[Armin]

moin,

wie sieht der gesamte Quelltext aus, inkl. Unterebene? Ist das eine verschachteltelte Liste?

Link zur Seite bitte.

Armin

[hannah]

hier der link
Marco once again: Firmenprofil

wie sieht der gesamte Quelltext aus, inkl. Unterebene? Ist das eine verschachteltelte Liste?

aeh sorry, ja ist eine verschachtelte menu-liste. die formatierung ist mir leider beim reinkopieren verloren gegangen, drum kann man das nur schwer erkennen. Brauchst du auch das gesamte CSS ? das ist leider ein ziemlich lang. Aber ich glaube nicht, dass es irgendwo zu anderen Listendefinitionen Überschneidungen gibt. Sonst habe ich nur noch das Linke Menü als Liste definiert und jeweils verschiedene IDs verwendet.

danke danke

[Armin]

moin,

so auf die Schnelle:

ul.first li ul li a {
	background-image: none;
}

Und für span dann auch...

Armin

[hannah]

ma super! und ich such da stunden lang. hab gedacht, wenn ich den unterlisten eigene classes geb mit background-image none wuerd das auf das gleiche rauskommen. tja so kann man sich irren.
vielen lieben Dank!