Multumesc anticipat
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-16" />
<title>
Database
</title>
<style type="text/css">
.menubar
{
width: 100%;
height: 20px;
background-color: darkblue;
}
span
{
padding-left: 5px;
font-weight: bold;
color: white;
}
ul
{
position: absolute;
margin: 0;
padding: 0;
display: none;
width: 120px;
background-color: green;
list-style-type: none;
border: 1px solid black;
}
li
{
padding-left: 5px;
}
li:hover
{
background-color: lightgray;
}
</style>
<script type='text/javascript'>
function showMenu(id,span)
{
for(i=1; i<=2; i++)
document.getElementById('ul'+i).style.display = 'none';
document.getElementById(id).style.display = 'block';
document.getElementById(id).style.marginLeft = (document.getElementById(span).offsetLeft - 5) +'px';
}
function hideMenu(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class='menubar' id='menubar'>
<span id='span1' onmouseover = "showMenu('ul1','span1');">Domenii</span>
<span id='span2' onmouseover = "showMenu('ul2','span2');">Categorii</span>
<ul id='ul1' onmouseout = "hideMenu('ul1');">
<li>Adauga</li>
<li>Editeaza</li>
</ul>
<ul id='ul2' onmouseout = "hideMenu('ul2');">
<li>Adauga</li>
<li>Editeaza</li>
</ul>
</div><!--al lui menubar-->
</body>
</html>
