layout problems with CSS position

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;
}