CSS Menü

Maggi13

Mitglied
Hey erstmal...:)

Also ich habe hier nen tut für nen CSS Menü gefunden bekomme es aber nicht ganz angpasst mit Bilder drinne nur mir farben geht es in jedem Browser...

Also es ist ein Button Menü... Das wenn man die Buttons berührt nen over kommt doch wenn man denn bei einem anderen Button wo sich dann die z-index öffnet kommt bei diesem button kein over und so halt wisst ihr wiee osll ich das lösen?:confused:

Hier der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>


<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS from tutorials of www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 90px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-image: url(menu1_nover.png);
border: 0px;
margin: 10px;
width: 80px;
height: 70px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background-image: url(menu1_nover.png);
}
#menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover, #menu dl a:hover {
background-image: url(menu1_over.png);
}
-->
</style>
</head>

<body>

<div id="menu">
<dl>
<dt><a href="http://google.de">Home</a></dt>
</dl>	
<dl>			
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
					<li><a href="#">Sub Menu 1.1</a></li>
					<li><a href="#">Sub Menu 1.2</a></li>
					<li><a href="#">Sub Menu 1.3</a></li>
					<li><a href="#">Sub Menu 1.4</a></li>
					<li><a href="#">Sub Menu 1.5</a></li>
					<li><a href="#">Sub Menu 1.6</a></li>
</ul>
</dd>
</dl>	
<dl>	
<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
</dl>
<dl>	
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.2</a></li>
					<li><a href="#">Sub Menu 3.3</a></li>
					<li><a href="#">Sub Menu 3.4</a></li>
					<li><a href="#">Sub Menu 3.5</a></li>
</ul>
</dd>
</dl>	
<dl>	
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.2</a></li>
					<li><a href="#">Sub Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>

</body>
</html>
 
Hi,

den "Buttons" der ersten Menüebene, wo derzeit kein Hover-Hintergrundbild erscheint, fehlt der eingebettete <a>-Tag, damit das Markup (HTML-Code) eine Übereinstimmung mit den beiden CSS-Selektoren #menu dt a:hover, #menu dl a:hover besitzt, und sich so die gesetzten CSS-Regeln darauf auch anwenden lassen.

mfg Maik
 
Zurück