html - CSS位置的布局问题

Question

嘿伙计们，我正在尝试创建一个类似于您在 starbucks.com 上找到的导航系统。这是我的样本的链接:http://dl.dropbox.com/u/73992/js_tests/test.htm我正在通过底部的导航示例来实现效果，但如您所见，存在定位问题。您可以在源代码中找到 CSS。我认为这是测试它的最佳方法。预先感谢您提供的任何帮助。

按照建议，这里是 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;
}

如果这有帮助，这就是我想要完成的

Answer 1

试一试。将位置从绝对位置更改为相对位置，并移除 30px 的上边距。您应该能够获得与上面 3 个示例相同的效果。

.content2
{
    position: relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    z-index:-5;
}

[编辑]

首先，移除“border-bottom:none;”因此您的 h1 仍将具有该选项卡式效果的底部边框。

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

给你的 h1 一个类，假设是“tabbed”

<li><h1 class="tabbed">Ex. 1</h1>

并且可能在您的 CSS 中使用一些底片。

h1.tabbed {
    position:absolute;
    top:-28px;   
}

试一试。