Menu
Hi guys, i dont know rather it is or not the right way to do it.
I was just trying to build up my first dhtml drop-down menu.
the problem is that i cannot but anything in the space occupied by the menu that appears while hovering, in other words, i cant set the string “ciao a tutti” beneath the menu, have a look please.
//code
<html>
<head>
<script type=”text/javascript”>
//primo pop-uop
function popUp(){
document.getElementById(‘info’).style.visibility= “visible”;
}
function popAway(){
document.getElementById(‘info’).style.visibility= “hidden”;
}
function stay(){
document.getElementById(‘info’).style.visibility= “visible”;
}
function delet(){
document.getElementById(‘info’).style.visibility= “hidden”;
}
//secondo pop up
function popUp1(){
document.getElementById(‘info1’).style.visibility= “visible”;
}
function popAway1(){
document.getElementById(‘info1’).style.visibility= “hidden”;
}
function stay1(){
document.getElementById(‘info1’).style.visibility= “visible”;
}
function delete1(){
document.getElementById(‘info1’).style.visibility= “hidden”;
}
//terzo pop up
function popUp2(){
document.getElementById(‘info2’).style.visibility= “visible”;
}
function popAway2(){
document.getElementById(‘info2’).style.visibility= “hidden”;
}
function stay2(){
document.getElementById(‘info2’).style.visibility= “visible”;
}
function delete2(){
document.getElementById(‘info2’).style.visibility= “hidden”;
}
</script>
<style type=”text/css”>
body{background-color: #cccc66; padding: 0; margin: 0;}
#container{width: 375px; height: 350px; border: 2px solid gold; margin: 10px auto;}
#navigator{width: 373px; height: 30px; margin: 0px;border: 1px solid gold; border-bottom: 0px;}
#navigator ul{padding: 0; margin: 0;}
#navigator li{list-style-type: none; float: left;}
#navigator a{display: block; text-decoration: none; color: #6666cc; font-family: verdana; text-align: center; line-height: 30px; width: 124px;}
#navigator a:hover{text-decoration: none; background-color: red; color: gold;}
/**************divs da appendere***/
#info{width: 120px; height: 120px; border: 2px solid gold; margin: 0px; float: left; background-color: #66ffcc; visibility: hidden; border-top: 0px;}
#info ul{margin: 0; padding: 0;}
#info li{list-style-type: none; display: block;}
#info a{text-align: center; text-decoration: none; color: red; line-height: 40px; display: block;}
#info a:hover{color: gold; background-color: #ffff66;}
/***div info1***/
#info1{width: 120px; height: 120px; border: 2px solid gold; margin: 0px; float: left; background-color: #33cc99; visibility: hidden; border-top: 0px; z-index: 1;}
#info1 ul{margin: 0; padding: 0;}
#info1 li{list-style-type: none; display: block;}
#info1 a{text-align: center; text-decoration: none; color: red; line-height: 40px; display: block;}
#info1 a:hover{color: gold; background-color: #ffff66;}
/***div info2
#info2{width: 120px; height: 120px; border: 2px solid gold; margin: 0px; float: left; background-color: #66ff33; visibility: hidden; border-top: 0px;}
#info2 ul{margin: 0; padding: 0;}
#info2 li{list-style-type: none; display: block;}
#info2 a{text-align: center; text-decoration: none; color: red; line-height: 40px; display: block;}
#info2 a:hover{color: gold; background-color: #ffff66;}
/*******************************************************/
</style>
</head>
<body>
<div id=”container”>
<div id=”navigator”>
<ul>
<li><a href=”#” onMouseover=”popUp()” onMouseout=”delet()”>Menu</a></li>
<li><a href=”#” onMouseover=”popUp1()” onMouseout=”delete1()”>Location</a></li>
<li><a href=”#” onMouseover=”popUp2()” onMouseout=”delete2()”>where?</a></li>
</ul>
</div>
<div id=”info” onMouseover=”stay()” onMouseout=”popAway()”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Service</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div id=”info1″ onMouseover=”stay1()” onMouseout=”popAway1()”>
<ul>
<li><a href=”#”>Destinations</a></li>
<li><a href=”#”>Tickets</a></li>
<li><a href=”#”>F.A.Q</a></li>
</ul>
</div>
<div id=”info2″ onMouseover=”stay2()” onMouseout=”popAway2()”>
<ul>
<li><a href=”#”>contact</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>prices</a></li>
</ul>
</div>
<p style=”font-family: verdana; color: blue; font-size: 15px; margin-top: -20px;”;>Ciao a tutti!</p>
</div>
</body>
</html>