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?
Hier der Code:
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?
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>
