CSS Vertical Menu with submenu callouts overlapping - html

Question

Its been a while - but I found myself a new exiting hobby in web development, and I am hoping that you can help me overcome the following issue:
I am working on a personal website. Content etc. is all preliminary. My main focus is the vertical menu on the left hand side. While I am pretty happy with the appearance so far, there are still some questions:
1) I had to set the transition as ease out to >0s, so that I have enough time between the main-menu hover and the hover over the sub-menu. Because of this, if I hover between main-menu items, they will briefly overlap due to the phase out. Is there a way to work around this?
(the focus selector might be an option, but that requires to click the menu item, and I prefer the hover)
2) The sub-menu is aligned to the top of the li of the main-menu. Because of that, the last item's sub (Testing) exceeds the boundaries of the page, giving whitespace below the page. Is there a way to make the sub-menu shift up if it presses against the edge of the overall body?
I probably could give it a different tag and design it differently, am I am hoping there is a more general solution.
3) Minor issue: When switching from main-menu hover to sub-menu hover, the main-icon "blinks" very briefly. Is that normal behavior? Certainly isn't pretty.
4) Last but not least: As this is my first time doing a website, I would be more than grateful to get your general feedback on inefficiencies in the code, so I can be more lean in the future.
(see updated fiddle below - full code removed to save space.)
Thanks for your help!
EDIT
THanks for your answers - issue #1 has been solved using the approaches you outlined!
However, the last submenu still gives me a bit a headache.
If I use the "last-child" selector, and the code added below, it will not change anything. However, if I give the last "bubble" a different tag, using the exact same code, the bubble will align to the bottom of the last main-menu item, but the containing UL remains defiant.
As you can see from the original CSS, the last "relative" is the main-menu IL, so shouldn't the submenu and the containing UL both align to the bottom of their respective parent/grandparent?
using a dedicated, different tag for the last-child "bubble_last
Using the last-child selector
and the accompanying new code (updated fiddle with full code: Heres the Fiddle ...use large screen for the result to see the alignment issue):
.navigation ul li:last-child {
border: solid orange;
}
.navigation .bubble_last{
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
bottom: 0px;
width: 400px;
height: 200px;
border: solid red;
}
.navigation .bubble_last ul{
position: absolute;
left: 0;
bottom: : 0px;
margin-top: 0px;
padding: 0px;
width: 20vw;
height: 100px;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border: solid blue;
margin-left: 28%;
display: block;
}
.navigation .bubble_last ul li {
list-style: none;
background-color: none;
border-radius: 3px;
height: 2vw;
line-height: 1.2vw;
width: 20vw;
position: relative;
padding-top: 0px;
margin: 0;
padding: 0;
}

Answer 1

Instead of adding a transition delay on .bubble, you just need to make the .bubble class wide enough (and start behind the main li trigger with a left: 60px) so that the hover will be continuous:
.navigation .bubble {
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
top: 0px;
width: 200px;
height: 100%;
background-color: none;
}
Then just add a margin-left to the submenu:
.navigation ul li ul {
margin-left: 20px;
}
To fix your second issue, simply add the following CSS to make the last submenu positioned relative to the bottom of the nav item:
ul li ul.subm:last-child {
top: auto;
bottom:0px;
}
Updated Demo: JSFiddle

Answer 2

How about this? Adjust your navigation to use the nav element, set it to use flex box, adjust that so it fits the height of your page, and then adjust the transition effects so they transition in and out properly.
I hope this helps.
#import url("http://fonts.googleapis.com/css?family=Roboto");
* {
border: none;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Roboto Condensed;
box-sizing: border-box;
}
.landing {
display: table;
margin: auto;
width: 100%;
height: 100%;
background: url("https://imageshack.com/i/poXkyeIYj") 50% 50% no-repeat;
background-size: cover;
top: 0;
position: relative;
z-index: 1;
}
.landing .welcome {
margin: 10px;
width: 89%;
color: #FFF;
text-align: center;
display: table-cell;
vertical-align: middle;
position: absolute;
left: 10%;
top: 30%;
}
#mug {
background: url("https://imageshack.com/i/pmJaAuFkj") 50% 50% no-repeat;
background-size: cover;
border: solid 3px #FFF;
/*max-width: 20%;
max-height: 20%; */
width: 150px;
height: 150px;
margin: auto;
border-radius: 100%;
}
nav {
width: 50px;
height: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
nav img {
max-width: 50px;
max-height: 50px;
}
.nav ul {
*zoom: 1;
list-style: none;
margin: 0;
padding: 0;
-ms-flex: 0 100px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
margin-top: 0px;
padding: 0px;
width: 11vw;
height: auto;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border-color: none;
}
nav ul li {
background-color: rgba(222, 225, 229, 0.8);
border-radius: 3px;
width: 100%;
font-size: 15px;
font-size: 1.2vw;
font-weight: 900;
}
.nav ul:before,
.nav ul:after {
content: "";
display: block;
}
.nav ul:after {
clear: both;
}
.nav ul>li {
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1.2em;
color: #fff;
border-left: 1px solid #595959;
text-decoration: none;
color: #FFF;
}
.nav a:hover {
text-decoration: none;
background-color: rgba(242, 93, 38, 0.8);
}
.nav li ul {
background: #273754;
}
.nav li ul li {
width: 200px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 11vw;
top: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 200ms ease;
-moz-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.nav ul>li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
span.caption {
display: none;
}
<body>
<div class="landing">
<div class="welcome">
<div id="mug">
</div>
<h1>Welcome to my personal Website!</h1>
<h2>On this site you will find a information about the person, the profession and other stuff about me. Enjoy!</h2>
</div>
<!-- cleaned up the navigation, nested it within the rest of the page, and adjusted the css -->
<nav class="nav">
<ul>
<li>
<img src="https://imageshack.com/i/potj2pVwp"> <span class="caption">Home</span>
</li>
<li>
<img src="https://imageshack.com/i/pntQ9nVMp"><span class="caption">About Me</span>
<ul>
<li>What I do</li>
<li>Motorcycling</li>
<li>Music</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/po4WFq6Yp"><span class="caption">Professional</span>
<ul>
<li>Current Employment</li>
<li>Working Experience</li>
<li>Education</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmcfm7Kbp"> <span class="caption">Projects</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pnM0Fmgrp"> <span class="caption">Misc</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/poqRnk6ap"> <span class="caption">Testing</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmc8tts9p"> <span class="caption">Contact</span>
</li>
</ul>
</nav>
</div>