[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 155
  • Last Modified:

div position

i have a menu time, when i press enter on the the last item it should open a div right below it, and should come on top of the content below the menu. some contents div should come over hello world div. please suggest a solution.
<html>
<head>
<style>
#menu li
{
display: inline;
list-style-type: none;
padding-right: 120px;

}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">1 item</a></li>
<li><a href="#">2 item</a></li>
<li><a href="#">3 item</a></li>
<li><a href="#">4 item</a><div style="width:300px;height:300px;background-color:gray;display:none">some contentssome contentssome contentssome contentssome contentssome contents
some contentssome contents some contents some contents some contents some contents</div></a></li>
</ul>
<div style="width:300px;height:300px;background-color:gray">
hello world hello world hello world hello world hello world hello world hello world hello world 
hello world hello world hello world hello world 
</div>
</body>
</html>

Open in new window

0
jcbmtt
Asked:
jcbmtt
1 Solution
 
bastianrCommented:
Not sure of your exact requirements, but since this is tagged jQuery, here's a quick solution using that. If you set position: relative on a containing element, that element becomes the new positioning context for absolutely-positioned children.
<!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>
<style>
#trigger-item {
	position: relative;
}
#menu li
{
	/*display: inline;*/
	float: left;
	list-style-type: none;
	padding-right: 120px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#trigger-item a').click(function() {
	  $('#hidden-div').show();
	});
 });
</script>
</head>
<body>
<body>
<ul id="menu">
<li><a href="#">1 item</a></li>
<li><a href="#">2 item</a></li>
<li><a href="#">3 item</a></li>
<li id="trigger-item"><a href="#">4 item</a><div id="hidden-div" style="width:300px;height:300px;background-color:gray;display:none;position:absolute;z-index:100;">some contentssome contentssome contentssome contentssome contentssome contents
some contentssome contents some contents some contents some contents some contents</div></a></li>
</ul>
<div style="width:300px;height:300px;background-color:gray;clear:both;">
hello world hello world hello world hello world hello world hello world hello world hello world 
hello world hello world hello world hello world 
</div>
</body>
</html>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now