Jump to content

Menu , position problem


asmith

Recommended Posts

hey guys

 

this code is a simple drop down menu. the problem i have with it is, I can't place the menu exactly under the link. because of the different screen resulation. the position is absolute. in different resolution the menu place moves to right or left. i wanted to know how can i fix it, for example it goes always under its link?

 

(i've tried making it without absolute position, but then it placed the menu between the page element and moved the bottom contents more down to make room for the menu. )

<head>

<script language="javascript">

function showLinks()
{
document.getElementById('myLinks').style.display='block';
}

function hideLinks()
{
document.getElementById('myLinks').style.display='none';
}

</script>

</head>
<body>

top content<br />
top content<br />
top content<br />
top content<br />

<div id="myLinks1" onmouseover="showLinks()">
<a href="6.gif" onmouseover="showLinks()" onmouseout="hideLinks()">navigate cursor here!</a>

<div color="yellow" id="myLinks" style="display:none;position:absolute;top:100px;left:500px;z-index:1000;border:1px black solid;background-color:red;color:white;" onmouseover="showLinks()" onmouseout="hideLinks()">

<a href="http://www.google.com">Google</a><br />
<a href="http://www.yahoo.com">Yahoo</a><br />
<a href="http://www.msn.com">MSN</a>

</div>
</div>

<div id="test">
Other contents of page<br />
Other contents of page<br />Other contents of page<br />Other contents of page<br />Other contents of page<br />Other contents of page<br />

</div>



</body>

Link to comment
Share on other sites

i was wondering about both ways, fix-width and non fix-width.

 

But lets say it is for example 900 px.

 

Well, fixed-width would probably be the easiest way to fix it, as you wouldn't have to worry about screen resolution (for the most part).  That left/right movement you've been noticing should go away, as the containing block will remain the same size.

 

In other words, if you have a site with a width of 900px, and you tell the drop-down to be top: 100px and left: 500px, it will position itself relative to the 900px, not the browser window.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.