定位导航栏

Question

Screenshot: Current Homepage

Screenshot: Desired Homepage / Navigation

Screenshot: Footer

我正在尝试在两个图像之一下方的标题内放置一个下拉导航栏。

目前，导航栏是向左浮动的，因为到目前为止我们在课堂上都是这样教的，但是标题中的两个图像（“徽标”和“在线投资组合横幅”）也向左浮动.我想知道是否有一种方法可以实现我想要的主页外观，将导航栏放在横幅下方？

代码片段：

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>

有没有人有任何建议或解决方法？我将不胜感激！

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>

希望这会有所帮助！

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>