layout problems with CSS position - html

Question

hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish

Answer 1

Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.

Answer 2

Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.

Answer 3

float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}