html – 定位导航栏

2023年8月22日 216次阅读

嗨,大家好,我正试图在两个图像中的一个下方的标题中放置一个Dropdown Nav Bar.

目前,导航栏浮动到左侧,因为这是我们到目前为止在课堂上教授的方式,但标题中的两个图像(“徽标”和“在线投资组合横幅”)也向左浮动.我想知道是否有办法实现我想要的主页外观,导航栏位于横幅下方？

代码片段：

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>

有没有人有任何建议或解决方法？我非常感谢！

最佳答案你的结构错了,试试这个(使用全屏预览)：

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>

希望这可以帮助！