Navigation Bar Location

Question

Screenshot: Current Page

Screenshot: Desired Start Page / Navigation

Screenshot: Footer

Hi guys, I'm trying to position the Dropdown navigation bar in the title bar under one of two images.

Currently, the navigation bar is moving to the left, as it was the way we were taught to do this in the classroom so far, but both the images in the title (“Logo” and “Online Portfolio Banner”) also float to the left. I wonder if Is there a way to reach the desired homepage, and the Nav panel is placed under 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>

Run codeHide result

Does anyone have any suggestions or solutions? I would really appreciate it!

Answer 1

, ( ):

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>

Hide result

, !

Answer 2

nav{
clear:both
}

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>

Hide result