Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-09-06
5
Medium Priority
?
774 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

670 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