IE Navigation 2. Ebene verschoben

Loon3y · 29 Dezember 2009

Moinsen...

nach langem mal wieder die Suche nach einem Rat...irgendwie seh ich den Wald vor lauter Bäumen nicht...und obwohl ich schon unzählige Navigationen erstellt hab, hab ich komischerweiße (im Sinne von lustig..) ein Problem...

In allen Browser, bis auf den Einen (IE..) funktioniert es...aber im IE ist irgendwie die Unterliste zu weit rechts gelanden... ;)

Anbei der Code..

Code:

<!DOCTYPE html>
<html><head>
	<title>Test</title>
	<meta charset="UTF-8" />

<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
		font-style:normal;
}

body { width: 57.875em; height:auto; margin:0em auto 2em; font: 100.01%/1.2em Helvetica, Arial, Tahoma, Geneva sans-serif; color: #000; background: #fff; }

/* N A V */
#navigation { width:57.875em; height: 1.875em; line-height:1.875em; background:#f1f1f1; }
#navigation li,#navigation li a { display:block; float:left; }
#navigation li a { font-size:0.8em; font-weight:600; padding:0px 20px; }
#navigation li a:focus,#navigation li a:hover,#navigation li.active { background:#fff; }

/* first lvl */
#navigation li ul { display:none; position:absolute; margin:1.875em 0em; z-index:999; background:#f1f1f1; }
#navigation li ul li,#navigation li ul li a  { display:block; float:none; position:relative; left:auto;  }
#navigation li a:focus ul,#navigation li:hover ul { display:block; }
</style>

</head><body>
<nav role="menu navigation">
	<ul id="navigation">
		<li><a href="#">Punkte 1</a>
			<ul>
				<li><a href="#">Punkte 1</a></li>
				<li><a href="#">Punkte 1</a></li>
				<li><a href="#">Punkte 1</a></li>
				<li><a href="#">Punkte 1</a></li>
			</ul>
		</li>
		<li><a href="#">Punkte 2</a>
			<ul>
				<li><a href="#">Punkte 2</a></li>
				<li><a href="#">Punkte 2</a></li>
				<li><a href="#">Punkte 2</a></li>
				<li><a href="#">Punkte 2</a></li>
				<li><a href="#">Punkte 2</a></li>
			</ul>		
		</li>
		<li><a href="#">Punkte 3</a>
			<ul>
				<li><a href="#">Punkte 3</a></li>
				<li><a href="#">Punkte 3</a></li>
				<li><a href="#">Punkte 3</a></li>
				<li><a href="#">Punkte 3</a></li>
				<li><a href="#">Punkte 3</a></li>
				<li><a href="#">Punkte 3</a></li>
			</ul>	
		</li>
		<li><a href="#">Punkte 3</a></li>
		<li><a href="#">Punkte 3</a>
			<ul>
				<li><a href="#">Punkte 3</a></li>
			</ul>
		</li>
		<li><a href="#">Punkte 3</a></li>
	</ul>
</nav>

</body></html>

Danke und Gruß
Loon3y

Loon3y · 29 Dezember 2009

Interessant..lag wohl an der mehrfachzuweisung auf li und a...

Code:

/* N A V */
#navigation { width:57.875em; height: 1.875em; line-height:1.875em; }
#navigation li { display:block; float:left; }
#navigation li a{ display:block; font-size:0.8em; font-weight:600; padding:0px 20px; }
#navigation li a:focus,#navigation li a:hover,#navigation li.active { background:#fff; }
/* first lvl */
#navigation li ul { display:none; position:absolute; z-index:999; background:#f1f1f1; left:auto; top:auto; }
#navigation li ul li { float:none; }
#navigation li ul li a  { display:block; position:relative; }
#navigation li a:focus ul,#navigation li:hover ul { display:block; }

damit gehts...

IE Navigation 2. Ebene verschoben

Loon3y

Neues Mitglied

Loon3y

Neues Mitglied

Neueste Beiträge