Brauche Hilfe bei Menue

Status
Nicht offen für weitere Antworten.
E

elg

Grünschnabel
Hallo,

ich habe null Ahnung von CSS, habe mir dieses menue aus einer Vorlage zusammengebastelt, was muss ich nun tun um wieder ein Rollovermenue rechts anzuschliessen?

Waere dankbar fuer eine ausfuehrliche Erklaerung!

Gruesse Elg





Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


<style type="text/css">
<!--
body {
background-color: silver;
}
ul { 
		margin: 0;
		padding: 0;
		list-style: none;
		width : 13em;
	}
	
li {
	position : relative;
	float : left;
	line-height : 1em;
	margin-bottom : 3,3px;
	width: 13em;
	background-color: #ff9900;
}
	
li ul { 
		display: block;
		position : absolute;
		left: -999em;		
		margin-left : 1,25em;
		margin-top : 0,2em;
}
	
li a {
		display : block;
		padding : 0.5em;
		width: 11em;
		w\idth : 13em;
		color : black;
		text-decoration : none;
		border : 1px solid black;
}
	
li a:hover {
		background-color : #cccccc;
	}
	
li:hover ul, li.sfhover ul {
	left: auto;
	}
// -->
</style>





</head>

<body>

<ul>

<li><a href="#">COMPANY INFORMATION</a><ul>
<li><a href="#">Link 3.1</a></li><li><a href="#">Link 3.2</a></li><li><a href="#">Link 3.3</a><a href="#">Link 3.3</a><a href="#">Link 3.3</a></li></ul></li>

</ul>


</body>
</html>
 
Hallo, das hilft mir nicht so richtig weiter, gibt es denn keinen der mir weiterhelfen kann

Gruesse vom verzweifeltem elg
 
Hai,

unter Salzis angegebenen link findest du u.a. auch dies .

Kompl. ohne javascript.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Drop Down Menu Example</title>
<style type="text/css">

.menu {display:none;}

#noniemenu {position:absolute;}

.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}

.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}

a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}

a.inner:hover {background:#add;}

</style>

<!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/ 

#noniemenu {display:none;}

.menu {display:block; position:absolute;}

a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}

a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}

a.inner:hover {background:#add;}
   /*]]>*/

   </style>
<![endif]-->

</head>

<body>

<div class="menu">
<a class="outer" href="#">Home
</a>

<a class="outer" href="#">Pages
<table><tr><td>
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</td></tr></table>
</a>

<a class="outer" href="#">Photo Albums
<table><tr><td>
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</td></tr></table>
</a>

<a class="outer" href="#">Blogs
<table><tr><td>
<a class="inner" href="#">Mostly</a>
</td></tr></table>
</a>
</div>

<div id="noniemenu">
<div class="holder">
Home<br />
</div>

<div class="holder">
Pages<br />
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</div>

<div class="holder">
Photo Albums<br />
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</div>

<div class="holder">
Blogs<br />
<a class="inner" href="#">Mostly</a>
</div>
</div>



</body>
</html>

Ciao Stefan
 
Hallo,

hab mir dein menue angesehen, nicht schlecht
ABER, meine veraenderungen werden im IE-Explorer nicht angezeigt, nur im NETSCAPE.

Wie kann ich das loesen?
 
Und nochmal,
als kleiner tipp, du solltest evt. deine Einstellung vom Anfang aendern, und bissle CSS lernen .
Ansosten hat war schon alles gesagt, wenn man nicht weiss was du anders gemacht hast ist das schwer zu sagen. Meiner Erfahrung nach funktionieren die Menues von der Site in allen neueren Browsern.
Ich haette da nur zwei profilaktische Ideen.
1. Der IE hat bei mir gesponnen, wenn ich oben die xml definition im Document hatte, einfach mal loeschen, ist auch noch W3C valid.
2. Falls du versucht hast viel zu aendern: der IE unterstuezt a:hover nur fuer Links, Firefox zB auf eine ganze menge Elemente wie <td> usw.
Hol dir mal einen neuen Firefox, der hat den besten CSS support, und dann mal weite sehen.
gruss
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück