Title Menu Issues

Question

I am trying to create a header menu as I like. I have only a little experience with CSS.

I have only two main menu items, each of which has a drop-down list. I want it to look something like this when I hover over the first menu item:

And something like this when hovering on the second menu item:

Note. I want the "Menu 1" and "Menu 2" to be located as they are on the images, including: "The drop-down menu for menu 1 is to the right of menu 1, the drop-down menu 2 is to the left of menu 2. I forgot to enable The "logo" is in the image, but it is centered in the middle.

I have a scenario of what I have managed so far ( check here ).

I have two problems:

• 100%. - 100%, 25%, -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

, .

JSFiddle

, , , 10 . , .

, h3 :

<h3 class="right">

, :).

Answer 2

:

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

You need to set the absolute value in the element <ul>to fix the problem of activating the active menu when you hover.

position: absolute;

Check out the updated jsFiddle .

Also, what do you mean by width not 100%?