Positioning a Navigation Bar

Question

Screenshot: Current Homepage

Screenshot: Desired Homepage / Navigation

Screenshot: Footer

I am trying to position a Dropdown Nav Bar within the Header below one of two images.

Currently, the nav bar is floated to the left, as this was how we were taught to do it in class so far, but both images within the header ('Logo' & 'Online Portfolio Banner') are also floated left. I'm wondering if there is a way to achieve my desired homepage look, with the Nav bar placed beneath the banner?

Code Snippet:

nav ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    float: left;
}
nav ul li {
    float: left;
    position: relative;
}
nav ul li a {
    display: block;
    min-width: 150px;
    padding: 7px 4px;
    margin-right: 5px;
    background-color: #393939;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul li a:hover {
    color: #2cc1d9;
}
nav ul ul {
    list-style-type: none;
    position: absolute;
    left: -9999px;
}
nav ul ul li {
    float: none;
}
nav ul ul li a {
    background-color: rgba(108,210,221,1.00);
    min-width: 200px;
    color: #fff;
    border: 1px solid #fff;
    display: block;
    padding: 7px 2px;
    text-decoration: none;
    font-size: .8em;
}
nav ul ul li a:hover {
    color: #393939;
}
nav ul li:hover ul {
    left: 0px;
}
img {
    margin-top: 5px;
    padding: 10px;
    float: left;
}
.banner {
    width: 585px;
    height: 77px;
    float: left;
}

<header>
  <p><img src="images/logo.png" width="130" height="130" alt="image of brand logo"></p>
  <p>
  <div class="banner"><img src="images/OP_header.png" width="585" height="77" alt="online portfolio banner"></div>
  </p>
  <nav>
    <ul>
      <li><a href="index.html">Home</a> </li>
    </ul>
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="about.html">About Me</a></li>
          <li><a href="resume.html">My Resume</a></li>
        </ul>
      </li>
      <li><a href="index.html">Work</a>
        <ul>
          <li><a href="branding.html">Identity & Branding</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a>
        <ul>
          <li><a href="contact.html">Contact Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Does anyone have any suggestions or work-arounds? I'd greatly appreciate it!

Answer 1

You've structured this wrong, Try this (use full screen for preview):

nav {
  display: inline-block;
  padding: 12px;
}

nav ul {
	list-style-type: none;
	text-align: center;
  padding: 0;
  margin: 0;
  display: inline-flex;
}

nav ul li {
  position: relative;
}

nav ul li ul {
  display: flex;
  flex-direction: column;
  position: absolute;
}

nav ul li a {
	display: block;
	min-width: 150px;
	padding: 7px 4px;
	margin-right: 5px;
	background-color: #393939;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}
nav ul li a:hover {
	color: #2cc1d9;
}
nav ul ul {
	list-style-type: none;
	position: absolute;
	left: -9999px;
}
nav ul ul li {
	float: none;
}
nav ul ul li a {
	background-color: rgba(108,210,221,1.00);
	min-width: 200px;
	color: #fff;
	border: 1px solid #fff;
	display: block;
	padding: 7px 2px;
	text-decoration: none;
	font-size: .8em;
}
nav ul ul li a:hover {
	color: #393939;
}
nav ul li:hover ul {
	left: 0px;
}
.brand-logo {
	padding: 10px;
	float: left;
}
.banner {
  padding: 10px;
	width: 585px;
	height: 77px;
	float: left;
}

<header>
  <div class="brand-logo">
    <img src="http://placehold.it/130x130" width="130" height="130" alt="image of brand logo">
  </div>
  <div class="banner">
    <img src="http://placehold.it/585x77" width="585" height="77" alt="online portfolio banner">
  </div>
  <nav>
    <ul>
      <li><a href="index.html">Home</a> </li>
    </ul>
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="about.html">About Me</a></li>
          <li><a href="resume.html">My Resume</a></li>
        </ul>
      </li>
      <li><a href="index.html">Work</a>
        <ul>
          <li><a href="branding.html">Identity &amp; Branding</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact</a>
        <ul>
          <li><a href="contact.html">Contact Me</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Hope this helps!