XHTMLforum - Einzelnen Beitrag anzeigen

timail · #3 (**permalink**) 14.09.2007, 16:15

Sarkasmus in allen Ehren, ich wollte eigentlich zunächst nur wissen OB jemandem dieses Problem bekannt ist, OB es bspw. ein bekanntes und nicht lösbares Problem mit dem Suckerfish ist oder nicht.

Mein Code sieht wie der übliche Code zur Einbindung einer Suckerfish-Navigation aus, nur dass meine Liste einen backgropund hat, der über opacity transparent geschaltet wird. Sobald ich das tue öffnet sich aber die Su-Sub-Ebene nicht mehr.

Hier der Code:

Code:

/*---------------------- Navigation ---------------------- */

#navibox ul.menu {
	display: block;
	margin: 6px 0 0 61px;
	padding:0;
}

#navibox ul.menu li {
	display: block;
	width: 189px;
	height: 34px;
	margin:0;
	padding:0;
	list-style: none;
	font-size: 13px;
}

#navibox ul.menu li a:link, #navibox ul.menu li a:visited{
	display: block;
	width: 149px;
	height: 34px;
	line-height: 34px;
	margin:0;
	padding:0 10px 0 38px;
	list-style: none;
	font-size: 13px;
	background: url(../images/navitrenner_vertikal.png) bottom left no-repeat;
	color: #000;
	text-decoration: none;
}

/*--- CSS Dropdown Subnavigation ---- */

#navibox ul.menu li ul {
	position: absolute;
	left: -9999px;
	margin: 0;
	padding: 0;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-top: 1px solid #666;
}

#navibox ul.menu li:hover ul, #navibox ul.menu li.sfhover ul {
	left: auto;
	width: 188px;
	margin: -35px 0 0 197px;
	padding: 0;
}

#navibox ul.menu li ul li {
	width: 188px;
	margin: 0;
	padding: 0;
	height: 24px ! important;
	line-height: 24px ! important;
	border-bottom: 1px solid #666;
}

#navibox ul.menu li ul li a:link, 
#navibox ul.menu li ul li a:visited {
	width: 168px;
	height: 24px ! important;
	line-height: 24px ! important;
	margin: 0 ! important;
	padding: 0 0 0 20px;
	background-image: none;
	text-transform: uppercase;
}

#navibox ul.menu li ul li a:hover {
	text-decoration: underline;
}

ul.menu ul li { 
	float: left; 
	height: 1%; 
}

ul.menu ul li a { 
	height: 1%; 	
}

/*--- CSS Dropdown SubSubnavigation ---- */

#navibox ul.menu li ul li ul {
	position: absolute ! important;
	left: -9999px ! important;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-top: 1px solid #666;
	margin: 0 ! important;
	padding: 0 ! important;
} 

#navibox ul.menu li ul li:hover ul, #navibox ul.menu li ul li.sfhover ul {
	left: auto ! important;
	width: 188px ! important;
	margin: -25px 0 0 188px ! important;
	padding: 0 ! important;
}

#navibox ul.menu li ul li ul li {
	width: 188px;
	margin: 0;
	padding: 0;
	height: 24px ! important;
	line-height: 24px ! important;
	border-bottom: 1px solid #666;	
}

#navibox ul.menu li ul li ul li a:link, 
#navibox ul.menu li ul li ul li a:visited {
	width: 168px;
	height: 24px ! important;
	line-height: 24px ! important;
	margin: 0 ! important;
	padding: 0 0 0 20px;
	background-image: none;
	text-transform: uppercase;
}

#navibox ul.menu, #navibox ul.menu li ul, #navibox ul.menu li ul li ul {
	background-color: #FFF;
}

Code:

<ul class="menu">
<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a>
	<ul>
		<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a>
			<ul>
				<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
				<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
				<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
			</ul>
		</li>
		<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
		<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
	</ul>
</li>
<li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li>
</ul>

Kennst jemand das Problem?
Gibt es einen Workaround?