Menu
im trying to make a div visible and bigger at a relative position, but the problem is when it becomes visible, it pushes all the text below it down… even though its relative. im lost please help me.
throw this is a .html file, then it will be really easy to understand my problem.
[CODE]
<html>
<head>
<style type=”text/css”>
.rightli {height:100px;padding:0;margin:0;width:150px;background-color:lightgrey;}
ul {list-style:none;margin:0;padding:0;width:150px;}
#dyes {background-color:black;left:161px;position:relative;margin:0;padding:0;top:5;width:0px;height:0;visibility:hidden;}
</style>
<script type=”text/javascript”>
function showmore(which)
{
show = document.getElementById(which);
show.style.height = “auto”;
show.style.width = “auto”;
show.style.visibility = “visible”;
}
function closemore(which)
{
show = document.getElementById(which);
show.style.height = “0px”;
show.style.width = “0px”;
show.style.visibility = “hidden”;
}
</script>
</head>
<body>
<ul>
<div id=”both” onMouseOver=”showmore(‘dyes’)” onMouseOut=”closemore(‘dyes’)”>
<li class=”leftli” style=”border-top:1px solid black;border-right:none;”>Dyes</li>
<div id=”dyes”>
<li class=”rightli”>all</li>
<li class=”rightli”>cool</li>
</div></div>
text that i dont want to move down when you hover over “dyes”
</body>
</html>