简体   繁体   中英

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.

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:

<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 using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well.

The first 2 problems are:

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

and you need your img to float: left.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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