Problems with a header menu - css

Question

I am trying to make a header menu work as I like. I have only minor experience with CSS.
I have only two main menu items, each with a dropdown. I want for it to look something like this when hover on first menu item:
And something like this when hovering on second menu item:
Note: I want the "Menu 1" and "Menu 2" to be positioned as they are in the images, including this: Dropdown for Menu 1 is to the right of Menu 1, dropdown of Menu 2 is to the left of Menu 2. I forgot to include "Logo" in the images, but it is centered in the middle.
I have a fiddle of what I have managed so far (check it out here).
I have two problems:
The width is not 100%. The blue background is 100%, but I tried for the two menu items to be 25% each and then there is a logo-div in the middle that should fill out the rest (with margin: auto), so it is 100% all together.
The active main menu item gets pushed down on hover
How to fix it to work as intended?
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 item 1</h3>
<ul>
<li>Dropdown 1 item 1</li>
<li>Dropdown 1/2</li>
<li>item 1 # 3</li>
<li>Dropdown 1 item 4 long</li>
<li>DD 1-5</li>
<li>Dropdown 1 i. 6</li>
</ul>
</section>
<span class="fill-width">Logo</span>
<section class="nav">
<ul>
<li>Dropdown 2 item 1</li>
<li>Dropdown 2/2</li>
<li>item 2 # 3</li>
<li>Dropdown 2 item 4 long</li>
<li>DD 2-5</li>
<li>Dropdown 2 i. 6</li>
</ul>
<h3 class="width-25">Menu item 2</h3>
</section>
</div>

Answer 1

I updated your fiddle with a way of how you could do this.
JSFiddle
It probably isn't the best or the cleanest way, but I did this in about 10 mins quickly. It should give you a base on how to go further.
The main problem was pretty much not giving your h3 seperate classes like so:
<h3 class="right">
I hope this helps you with your problem :).

Answer 2

Some few things:
Add position: relative to .nav.
Give position: absolute to .nav ul.
Now check this out:
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>ECMAScript 2015 (ES6)</li>
<li>TypeScript/ES7</li>
<li>Observables</li>
<li>Building/Deploying</li>
<li>Components</li>
<li>View/Input Data</li>
</ul>
</section>
<span class="fill-width"></span>
<section class="nav">
<ul>
<li>Forms</li>
<li>Pipes</li>
<li>Services</li>
<li>Directives</li>
<li>Dependency Injection</li>
<li>Testing</li>
</ul>
<h3 class="width-25">Angular 2</h3>
</section>
</div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>

Answer 3

You need to set the position to absolute on the <ul> element to fix the issue of active menu getting pushed on hover.
position: absolute;
Check out this updated jsFiddle.
Also, what do you mean by the width is not 100%?