[Pedro86]

Hallo, ich habe eine vertikales Menü auf meiner Homepage, das besteht aus Grafiken. Ich möchte bei einem mouseover event neue Menüpunkte nach rechts hin anzeigen lassen.

Kann mir da jemand helfen, meine jetzige Lösung ist nicht so toll...

[Pedro86]

Ok, ich versuche es gerade hiermit, aber irgendwie klappt es nicht, weiss einer woran es liegt?

<ul class="nav">
<li><strong>a navigation item</strong>
	<ul>
	<li>a navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li><strong>a navigation item</strong>
	<ul>
	<li>another navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li>...</li>
...
</ul>


/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
}

ul.nav{
	width: 20ex;
/*Optional, to make the navigation bar positions on the left of the content*/
	float: left;
	margin-right: 1em;
}

ul.nav>li{
	margin: 0;
	padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	width: 20ex;
	left: 20ex;
	margin-top: -1.4em;
	margin-left: 9px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #fff;
	color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
	background-color: #369;
	color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: #036;
	color: #fff;
}

ul{
	border: 1px solid #369;
}

.nav a{
	text-decoration: none;
}

Ich hab das einfach so als HTML Dokument abgespeichert, aber es wird nicht so angezeigt, wie ich mir das wünsche...

EDIT: Na toll... beim Firefox geht es, der IE zeigt alle komplett anders an... hat jemand vielleicht einen Vorschlag?

Dieser Beitrag wurde von Pedro86 bearbeitet: 28. November 2005 - 10:15

[flo]

Zitat

EDIT: Na toll... beim Firefox geht es, der IE zeigt alle komplett anders an... hat jemand vielleicht einen Vorschlag

Das liegt daran das der IE :hover nur bei Links zulässt sprich a:hover, bei allen anderen elementen ignoriert er das.

Das heist, ohne Java Script wirst du nicht weiterkommen