Solved

How do I bring the drop down menu to most front ?

Posted on 2010-09-06
5
767 Views
Last Modified: 2012-06-27
Hi experts,

I followed the tutorial at http://www.webdesign.org/web-programming/javascript/sliding-jquery-menu.17229.html  to get a drop down menu.

However I tried to make a table/content in front but the drop down menu seens opens behind the table. Can anyone teach me how to get drop downs menu to the front? for example: the log in drop down menu for site? Thanks :)

Regards
Aaxen
<!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=utf-8" />
<title>Sliding Menu Tutorial | HV-DESIGNS.CO.UK</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slider.js"></script>

</head>

<body>
<div id="container">
<div id="header">
</div>

<div id="button">
<img src="image/btnhome.jpg" width="184" height="32" border="0" class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>

</ul>

</div>
</div>
<table border="0" cellpadding ='0' cellspacing ='0' align =center  id="table1">
<tr><td style='background-color: #FFFFFF;' height="95" valign = 'top'>This is Not a drill</td></tr></table>
</body>
</html>

Open in new window

0
Comment
Question by:aaxen
  • 3
  • 2
5 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 33615402
Hi,

Just replace the below line
<ul class="the_menu" style="position:absolute;z-index:1;">
with <ul class="the_menu">

I tested it is working fine.
0
 
LVL 13

Accepted Solution

by:
ansudhindra earned 500 total points
ID: 33615405
Oh! Sorry,

Replace the line
<ul class="the_menu"> with the line
<ul class="the_menu" style="position:absolute;z-index:1;">

Sorry, ignore my previous post.
0
 

Author Comment

by:aaxen
ID: 33615482
ahh cool works shows to front. just that the list opens from side instead of below the img
0
 

Author Comment

by:aaxen
ID: 33615491
aah nvm got it :P Thanks
0
 
LVL 13

Expert Comment

by:ansudhindra
ID: 33615505
you got it resolved or you still have some problem?
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question