pop up menu

mykl · #1 Oct 26th, 2007, 20:11

I have a pop up menu that I can manipulate in every way I want except one. When the sub menu options pop up they are obscured by the main menu bar and I would like to have the sub menu options visible in front of the main bar. I know I could move the pop up higher but I don't want to! If you have a look here:
http://www.freewebs.com/mykl/test.html
you'll see that the lowest pop up bar on the Biography tab is hidden by the Gallery tab. I want the Gallery tab to hide behind the pop up.

AdRock · #2 Oct 26th, 2007, 20:18

Can you not adjust the z-index of the divs or whatever you used in the pop-up?

Try changing the z-index of the pop-up higher than the z-index of the tabs themselves

mykl · #3 Oct 26th, 2007, 20:29

No, I tried that - I tried giving things higher or lower z-index but either nothing happened or the popups went the wrong way and disappeared off the bottom of the screen!

AdRock · #4 Oct 26th, 2007, 20:30

Can you post the code for the menu along with the css for it?

mykl · #5 Oct 26th, 2007, 20:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>Menu Test</title>

<style type="text/css">

body {
scrollbar-base-color:#fff;
margin:0px 0px 0px 0px;
padding:0px;
font-family: arial, helvetica, verdana;
}

#menu{
position: absolute;
z-index: 2;
bottom:10px;
width: 75%;
margin-left: 240px;
margin-right: 240px;
}

.menu {font-family: arial, helvetica, verdana; position:relative; font-size:13px; margin:50px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #A7A4A4; border-width:0px 1px 1px 0px; background:#fff url(http://i9.photobucket.com/albums/a95.../pro16_0.gif); line-height:25px; font-size:13px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {visibility:hidden; position: absolute;}
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;}
.menu ul li:hover a, .menu ul li a:hover {color:#700194; background:#000 url(http://i9.photobucket.com/albums/a95/Mykl/other/pro16_0.gif);}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:13px; left:0;}
.menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:300px; clear:both;}
.menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position: absolute;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background: #090; color:#900; width:100%; padding-left:10px;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#fff; color:#700194;}
</style>
</head>

<body>

<div id="menu">
<ul class="menu">
<ul>
<li><a href="#nogo">Home</s></li>
<li><a href="#nogo">Biography</a>

<ul>
<li><a href="#nogo">The Duo</a></li>
<li><a href="#nogo">Mykl</a></li>
<li><a href="#nogo">Heledd</a></li>
</ul>

</li>

<li><a href="#nogo">Gallery</a></li>

<li><a href="#nogo">Links</a>

<ul>
<li><a href="#nogo">MYKLworld</a></li>
<li><a href="#nogo">MYKLscape</a></li>
</ul>

</li>

<li><a href="#nogo">Music</a></li>

<li><a href="#nogo">Contact</a>

<ul>
<li><a href="#nogo">E-Mail Mykl</a></li>
<li><a href="#nogo">E-Mail Heledd</a></li>
</ul>

</li>
</ul>
</div>

</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css menu	csun	PHP Forum	4	Aug 1st, 2007 20:37
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Add Sub Menu	DannyP43	JavaScript Forum	10	Sep 3rd, 2006 19:47
CSS menu	cbrams9	Web Page Design	1	Aug 3rd, 2006 15:46
Help with pop-up menu please!!!??	aseriouslyfunkydiva	Graphics and 3D	1	Nov 16th, 2005 15:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
pop up menu