在导航中创建指示器凹槽时遇到css问题

Question

当我遇到一个小问题时，我一直在搭建一个网站并构建基本的布局。我想创建一个“槽口”导航，但我不知道做这件事的第一件事。

我试着在我的下方创建一个可以与创建“凹槽”效果的底部对齐的图像(我可以使用CSS或使用图像创建一个白色三角形)。我还没有在这方面取得成功，希望具有css // html向导状态技能的人可以提供帮助。

ps。如果您需要更多信息，请让我知道-我对stackoverflow是个新手

Answer 1

Cappuccino使用下面的css标记链接标签。

<style>
        #navmarker {
        width: 1px;
        height: 0;
        position: relative;
        margin-top: -0.7em;
        margin-left: auto;
        margin-right: auto;
        border-bottom: #FFD48E solid 0.8em;
        border-top: none;
        border-left: transparent solid 0.8em;
        border-right: transparent solid 0.8em;
        }

        div {
            display: block;
        }
    </style>

尝试创建一个div并使用上面的css，它适用于我。

    <div id="navmarker"></div>

Answer 2

让你的NAV LI标签&其中的A标签一直延伸到你的内容块的顶部。

当安莉是“当前”标签时，在其中放置一个三角形图形作为A标签的背景。

li.current a {
    background:url(triangle.png) no-repeat center bottom;
}

您可能希望三角形为蓝色，与内容块顶部的蓝色条相同。