die anhangfunktion unter erweitert geht bei mir nich, darum hier der code so:
die html:
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
<title>Test</title>
</head>
<body>
<div id="menu">
<ul id="menulist">
<li><a href="#">Item</a></li>
<li><a onmouseover="openapp()" onmouseout="closeapp()" id="app" href="#">Apps</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<!-- Menu -->
<div id="appmenu" onmouseover="openapp()" onmouseout="closeapp()">
<div id="appuntermenu">
<a href="#">App 1</a>
<a href="#">App 2</a>
</div>
</div>
</body>
</html>
die datei main.css:
#menu {
width : 800px;
height : 30px;
position : relative;
margin : 20px auto;
background-color: silver;
}
#menu a {
background-color: green;
margin : 0px;
border : 0px;
text-decoration : none;
text-align : center;
color : white;
}
#menu li {
background-color: green;
margin : 0px;
border : 0px;
text-decoration : none;
text-align : center;
color : white;
}
#menu a:hover {
background-color: lime;
}
#menu a:active {
background-color: darkgreen;
}
ul {
list-style: none;
}
#menulist {
display : block;
position : realtive;
margin : 0px;
padding : 0px;
}
li a {
background-position : 100%;
cursor : pointer;
float : left;
width : 160px;
height : 30px;
}
die datei: dropdown.css:
#appmenu {
position : absolute;
top : 50px;
left : 443px;
width : 160px;
visibility : hidden;
}
#appuntermenu {
width : 160px;
height : 30px;
}
#appuntermenu a {
background-color : green;
color : white;
display : block;
text-decoration : none;
text-align : center;
line-height : 30px;
}
#appuntermenu a:hover {
background-color : lime;
}
#appuntermenu a:active {
background-color : darkgreen;
}
#appuntermenu a:visited {
background-color : green;
}
#appuntermenu div {
margin : 0px;
padding-right : 30px;
padding-left : 15px;
padding-top : 1px;
}
und menu.js:
function openapp() {
document.getElementById('appmenu').style.visibility = 'visible';
}
function closeapp() {
document.getElementById('appmenu').style.visibility = 'hidden';
}
das problem ist, dass bei mir unter vollbild das untermenü an der richtigen stelle ist. bei euch hängt das wahrscheinlich iwo rum.
gruß
