CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vader
vader

Reputation: 45

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

Upvotes: 0

Views: 59

Answers (1)

wazz
wazz

Reputation: 5068

The first 2 problems are:

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

and you need your img to float: left.

Upvotes: 1

Related Questions