定位导航栏

Question

Screenshot: Current Homepage

Screenshot: Desired Homepage / Navigation

Screenshot: Footer

大家好，我正在尝试将一个Dropdown Nav Bar定位在两个图像中的一个下方的Header中。

目前，导航栏浮动到左侧，因为这是我们在课堂上教授它的方式，但标题中的两个图像（'Logo'和''在线投资组合横幅'）也是浮动的剩下。我想知道是否有办法实现我想要的主页外观，导航栏位于横幅下方？

代码段：

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您已构建错误，请尝试此操作（使用全屏进行预览）：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！