HTML

Question

我想在标题图片的顶部添加一个菜单，菜单应位于标题的右上角（标题上方）。

以下是代码：

    <div class="container-full">
        <img src="images/header_01.png" style="max-width:100%; height:auto;"/>
            <div class="navbar navbar-default">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Acasa<br />Bine ati venit!</a></li>
                    <li><a href="#">Despre noi<br />Descriere si misiune</a></li>
                    <li><a href="#">PRODUSE<br />Produsele noastre</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">PHOENIX GRUP<br />Membri</a></li>
                    <li><a href="#">PORTOFOLIU<br /> Lucrari executate</a></li>
                    <li><a href="#">Contact<br />Contact</a><li>
                </ul>
            </div>
    </div>

这是小提琴：https://jsfiddle.net/8ovdwpub/

这是模型：http://tinypic.com/view.php?pic=qz5f6q&s=8#.VdWiQvR0Ygk

我试过看StackOverflow但找不到任何东西。我怎样才能达到预期的效果？

Answer 1

这可以是一个很好的起点

HTML

<div class="container-full">
    <div class="navbar navbar-default" id="tr-navbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Acasa<br />Bine ati venit!</a></li>
            <li><a href="#">Despre noi<br />Descriere si misiune</a></li>
            <li><a href="#">PRODUSE<br />Produsele noastre</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#">PHOENIX GRUP<br />Membri</a></li>
            <li><a href="#">PORTOFOLIU<br /> Lucrari executate</a></li>
            <li><a href="#">Contact<br />Contact</a>
                <li>
        </ul>
    </div>
    <img id="img-header" src="http://i60.tinypic.com/4v1z4p.jpg" style="max-width:100%; height:auto;" />
</div>

CSS

#tr-navbar {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 2;
  background-color: transparent;
  border: 0;
}
#img-header {
  position: absolute;
  top: 0;
}

查看fiddle

只要小心反应......

将导航栏放在标题图像的右上方（Bootstrap）

1 个答案:

HTML

CSS