Question

我正在努力使标题菜单正常工作。我只有很少的CSS经验。

我只有两个主菜单项，每个菜单项都有一个下拉列表。当我将鼠标悬停在第一个菜单项上时，我希望它看起来像这样：

当悬停在第二个菜单项上时，这样的事情：

注意：我希望“菜单1”和“菜单2”在图像中定位，包括：菜单1的下拉菜单位于菜单1的右侧，菜单2的下拉菜单位于左侧菜单2.我忘了在图像中包含“徽标”，但它位于中间。

我掌握了迄今为止我所管理的内容（check it out here）。

我有两个问题：

宽度不是100％。蓝色背景为100％，但我尝试将两个菜单项分别设为25％，然后在中间有一个logo-div，应该填写其余部分（有边距：自动），所以它是100％全部一起。
活动的主菜单项在悬停时被按下

如何修复它按预期工作？

body {
  margin: 0px;
}

.header {
  background-color: royalblue;
  width: 100%;
  margin-bottom: 1em;
  height: 3.15em;
  color: yellow;
  box-shadow: 0px 0px 5px black;
}

.nav h3 {
  display: inline-block;
  margin-left: 0.3em;
}

section {
  display: inline-block;
  vertical-align: text-top;
}

.nav:first-of-type h3 {
  text-align: right;
}

.nav ul {
  display: inline-block;
  padding: 0;
  top:36px;
  list-style-type: none;
  width: 15em;
  margin-top: 4em;
  display: none;
}

.nav:nth-of-type(2) ul {
  text-align: right;
}

.nav:hover ul {
  display: inline-block;
}

.width-25 {
  width: 25%;
}

.fill-width {
  margin: auto;
}

<div class="header">
  <section class="nav">
    <h3 class="width-25">Menu&nbsp;item&nbsp;1</h3>
    <ul>
      <li><a href="/" class="menu-link">Dropdown 1 item 1</a></li>
      <li><a href="/" class="menu-link">Dropdown 1/2</a></li>
      <li><a href="/" class="menu-link">item 1 # 3</a></li>
      <li><a href="/" class="menu-link">Dropdown 1 item 4 long</a></li>
      <li><a href="/" class="menu-link">DD 1-5</a></li>
      <li><a href="/" class="menu-link">Dropdown 1 i. 6</a></li>
    </ul>
  </section>
  <span class="fill-width">Logo</span>
  <section class="nav">
    <ul>
      <li><a href="/" class="menu-link">Dropdown 2 item 1</a></li>
      <li><a href="/" class="menu-link">Dropdown 2/2</a></li>
      <li><a href="/" class="menu-link">item 2 # 3</a></li>
      <li><a href="/" class="menu-link">Dropdown 2 item 4 long</a></li>
      <li><a href="/" class="menu-link">DD 2-5</a></li>
      <li><a href="/" class="menu-link">Dropdown 2 i. 6</a></li>
    </ul>
    <h3 class="width-25">Menu&nbsp;item&nbsp;2</h3>
  </section>
</div>

Answer 1

一些事情：

将position: relative添加到.nav。
将position: absolute提供给.nav ul。

现在看看这个：

body {
  margin: 0px;
}
.header {
  background-color: royalblue;
  width: 100%;
  margin-bottom: 1em;
  height: 3.15em;
  color: green;
  box-shadow: 0px 0px 5px black;
}
.nav h3 {
  display: inline-block;
  margin-left: 0.3em;
}
section {
  display: inline-block;
  body {
  margin: 0px;
}

.header {
  background-color: royalblue;
  width: 100%;
  margin-bottom: 1em;
  height: 3.15em;
  color: green;
  box-shadow: 0px 0px 5px black;
}

.nav h3 {
  display: inline-block;
  margin-left: 0.3em;
}

section {
  display: inline-block;
}

.nav:first-of-type h3 {
  text-align: right;
}

.nav ul {
  display: inline-block;
  padding: 0;
  top:36px;
  list-style-type: none;
  width: 15em;
  margin-top: 4em;
  display: none;
}

.nav:nth-of-type(2) ul {
  text-align: right;
}

.nav:hover ul {
  display: inline-block;
}

.width-25 {
  width: 25%;
}

.fill-width {
  margin: auto;
}

}
.nav:first-of-type h3 {
  text-align: right;
}
.nav ul {
  display: inline-block;
  padding: 0;
  top: 36px;
  list-style-type: none;
  width: 15em;
  margin-top: 4em;
  display: none;
}
.nav:nth-of-type(2) ul {
  text-align: right;
}
.nav:hover ul {
  display: inline-block;
}
.width-25 {
  width: 25%;
}
.fill-width {
  margin: auto;
}
.nav {
  position: relative;
}
.nav ul {
  position: absolute;
}

<div class="header">
  <section class="nav">
    <h3 class="width-25">Toolbox</h3>
    <ul>
      <li><a href="/es6" class="menu-link">ECMAScript 2015 (ES6)</a></li>
      <li><a href="/typescript" class="menu-link">TypeScript/ES7</a></li>
      <li><a href="/obserables" class="menu-link">Observables</a></li>
      <li><a href="/build" class="menu-link">Building/Deploying</a></li>
      <li><a href="/components" class="menu-link">Components</a></li>
      <li><a href="/testing" class="menu-link">View/Input Data</a></li>
    </ul>
  </section>
  <span class="fill-width"></span>
  <section class="nav">
    <ul>
      <li><a href="/forms" class="menu-link">Forms</a></li>
      <li><a href="/pipes" class="menu-link">Pipes</a></li>
      <li><a href="/services" class="menu-link">Services</a></li>
      <li><a href="/directives" class="menu-link">Directives</a></li>
      <li><a href="/di" class="menu-link">Dependency Injection</a></li>
      <li><a href="/testing" class="menu-link">Testing</a></li>
    </ul>
    <h3 class="width-25">Angular&nbsp;2</h3>
  </section>
</div>

<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

Answer 2

我更新了你的小提琴，了解如何做到这一点。

JSFiddle

它可能不是最好或最干净的方式，但我很快就做了大约10分钟。它应该为你提供如何进一步的基础。

主要问题几乎没有像你这样给你的h3单独的课程：

<h3 class="right">

我希望这可以帮助您解决问题：）。

Answer 3

您需要在<ul>元素上将位置设置为绝对，以解决在悬停时推送活动菜单的问题。

position: absolute;

查看此更新的jsFiddle。

另外，宽度是什么意思不是100％？

标题菜单问题

3 个答案: