简体   繁体   English

无法创建水平菜单下拉菜单

[英]not able to create horizontal menu drop down

I am working on designing a page by looking at the image I have. 我正在通过查看图像来设计页面。 I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. 我无法使用菜单栏设计,因为我无法弄清楚如何设计图像中的菜单栏。 It should exactly match with what I have in my image. 它应该与我的图像完全匹配。

Here is my jsfiddle and here is my image which I am trying to replicate. 这是我的jsfiddle ,这是我要复制的图像

I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. 我尝试创建该图像所示的水平菜单栏,但是以某种方式根本没有显示我的菜单。 It looks like they are hidden somewhere. 看来它们隐藏在某个地方。 Here is my HTML code: 这是我的HTML代码:

<div class="topnav">
    <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
    <nav>
        <ul>
            <li class="dropdown">
                <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown-content">
                    <li><a href="#"><i>INDIVIDUAL</i></a>
                    </li>
                    <li><a href="#"><i>CORPORATE</i></a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown-content">
                    <li><a href="#"><i>BE EXTRODINARY</i></a>
                    </li>
                    <li><a href="#"><i>RISK & REWARD</i></a>
                    </li>
                    <li><a href="#"><i>BLOG</i></a>
                    </li>
                    <li><a href="#"><i>OUR STORY</i></a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png">
    <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>

What is wrong I am doing here? 我在这里做什么错? Also I need to make Log in | Sign up 我还需要Log in | Sign up Log in | Sign up using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well. Log in | Sign up使用的字体aswesome(我已经导入它的CSS在我的jsfiddle)和GET COVERED按钮为好。

The first 2 problems are: 前两个问题是:

.dropdown {
    display: none; /* get rid of this */
}

and you need your img to float: left. 并且您需要将img浮动:左。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM