We Keep Coding

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

HTML/CSS vertical divider with bullets

I was just wondering how I can obtain this kind of UI design using HTML/CSS:
It should be that every time a user inputs a new data, it'll display the data with a divider and a bullet.
I am new to these kind of UI design in terms of HTML/CSS.

This is pretty darn close.. Only things I can think of are that you will need to tweak the fixed sizes for your font and that it is probably not going to be pretty on a mobile device. https://jsfiddle.net/x6bthxgw/
HTML:
/* CSS: */
body {
font-family: sans-serif;
}
ul.pretty-list {
border-left: 1px solid grey;
padding-left: 16px;
margin-left: 200px;
text-transform: uppercase;
}
ul.pretty-list li {
list-style: none;
}
ul.pretty-list ul {
padding-left: 0px;
}
ul.pretty-list h4 {
color: skyblue;
position: relative;
}
ul.pretty-list .date {
margin-left:-216px;
width:184px;
text-align: right;
padding-right: 1em;
float: left;
position:relative;
}
ul.pretty-list .date:after {
content:"•";
position: absolute;
right:-10px;
width:21px;
font-size:30px;
line-height:18px;
text-align:center;
}
<ul class="pretty-list">
<li>
<h4><div class="date">2015 - Present</div>Item 1</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li>
<h4><div class="date">2014 - 2015</div>Item 2</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
</ul>

Try the snippet below. I dont know for certain if is this what you need. This CSS is written on simple logic:
.full-width {
float:left;
width:100%;
display:flex;
}
.first_box {
width:300px;
display:inline-block;
text-align:right;
font-size:15px;
padding-right:15px;
}
.second_box {
width:400px;
display:inline-block;
text-align:left;
padding-left:30px;
font-size:15px;
border-left:2px solid #069;
position:relative;
}
.second_box:after {
content:"";
position:absolute;
left:-8px;
top:8px;
background:#900;
width:15px;
height:15px;
border-radius:50%;
}
.second_box h2 , .first_box h2 {
margin:0;
}
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->

You can try this. It is a simple structure to follow.
<div class="abc">
<div class="abc3">
<div class="abc2">
2016 - Present
<span class="abc1"></span>
</div>
<div class="abc2">
Front End Developer
</div>
</div>
<div class="abc3">
<div class="abc2"></div>
<div class="abc2"></div>
</div>
</div>
<style>
.abc{
display: table;
background: grey;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
}
.abc1{
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
}
.abc2 {
display: table-cell;
width: 50%;
border-right: 1px solid blue;
}
.abc3{
display: table-row;
}
</style>

Try using the code below:
<ul>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
</ul>
CSS:
ul {
list-style: none;
width: 300px;
}
ul li {
position: relative;
}
ul li span {
width: calc(100%/3);
display: inline-block;
}
ul li:before {
content: '';
position: absolute;
top: 15px;
left: 107px;
height: 90%;
width: 2px;
background: #cccccc;
}
.bullet {
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
background-color: blue;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right
}
Please arrange positions and text according to the requirement.

Just try with the below link: DEMO
<div style="
display: table;
background: yellow;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
"><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
">2015 - Present<span style="
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
"></span></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
">Front End Developer</div></div><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
"></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
"></div></div></div>

ul li {
display: inline-block;
padding: 5px;
border: 0;
border-right-width: 1px;
border-style: solid;
}
<ul>
<li>
menu1
</li>
<li>
menu2
</li>
<li>
menu3
</li>
</ul>

jQuery .slideToggle() not working

I am trying to build a mobile friendly navigation for my website and I want to use a menu that slides down after pressing the menu link. I thought it would be pretty simple but it isn't working. When I click the link "Menu" nothing happens. It should reveal a menu using the .slideToggle feature of jQuery. If you could offer a fix or an alternative method to making a responsive and mobile friendly menu.
<script>
$(document).ready(function(){
$("#burger").click(function(){
$("#menu").slideToggle();
});
});
</script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<img src="root/logo.png">
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
</body>
</head>
This is my CSS:
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
display: none;
float: right;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}

Your menu is hidden in the CSS, try this instead:
$("#burger").click(function(){
$("#navbar").slideToggle();
});
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
float: right;
color: #B9E0F6;
margin-top: 24px;
font-size: 24px;
cursor: pointer;
text-decoration: underline;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: inline-block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<!-- Scripts Here -->
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script>
<script type = "text/javascript" src="script/bootstrap.min.js"></script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<div style="display:inline-block">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" />
</div>
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->

How to highlight anchor link when target div comes in view in jQuery?

I have a webpage like the following layout;
The HTML is;
<div class="header" style="text-align: center">Demo</div>
<div class="navi">
<div class="title">
Options
</div>
</div>
<div class="content">
<div class="da">
diva
divb
divc
divd
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
</div>
<div class="footer"> </div>
and CSS is;
html, body, div, h2, img, ul, li, form, time {
margin: 0;
padding: 0;
border: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
min-width: 800px;
}
.header{
height: 40px;
color: #FFF;
background-color: #666666;
}
.title{
display: block;
float: left;
margin-top: 4px;
margin-left: 10px;
}
.content{
margin-bottom: 36px;
}
.footer{
height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1px #CCCCCC;
background: #FFFFFF;
}
.da,.db{
position: absolute;
z-index: 0;
top: 82px;
bottom: 30px;
}
.da{
width: 200px;
border-right: solid 1px #CCCCCC;
overflow: visible !important;
}
.da a{
font-family: Tahoma;
display: block;
padding: 10px;
text-decoration: none;
color: #555;
}
.da a:hover{
background-color: #DDD;
}
.da .current,.da .current:hover{
background-color: #FF6600;
}
.db{
left: 200px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
The links of sidebar are anchored to 4 cascaded divs. They are linked to divs and when I click on links, the corresponding div will scroll up. This worked fine. But I tried to achieve something different. The link of current visible div may be given orange background color, so that when user scrolls the page, the orange color will shift from one link to another, according to the current div on page. After some googling and research, I found this SO question useful jQuery changing css on navigation when div # scrolls into view. A demo of the solution is available in this fiddle which is exactly what I want.
But when I tried to implement this solution in my layout, it is not working, ie, links are not highlighting to corresponding div.
Here is my fiddle.
How can I implement the same in my layout?

Try this:
CSS:
.da,.db{
position: relative; // changed to relative. Because of absolute your document height is affected.
z-index: 0;
top: 82px;
bottom: 30px;
}
.db{
left: 142px;
top:42px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
jQuery:
$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.
DEMO

I couldn't wrap my head around some of these answers, but I found this really simple idea.
It's basically saying that the mouse will be in view at some position on the screen, and if it is within a specific div, highlight the matching link.
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
<span id ="menu">☰</span>
<ul id="top-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="wrapper">
<div id="one" class="container">
one
</div>
<div id="two" class="container">
two
</div>
<div id="three" class="container">
three
</div>
<div id="four" class="container">
four
</div>
<div id="five" class="container">
five
</div>
<div id="six" class="container">
six
</div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: Geneva, Tahoma, Verdana, sans-serif;
margin: 0px;
}
.nav{
width: 100%;
height: 50px;
background: rgba(200,200,200,0.2);
position: fixed;
top: 0px;
}
#menu{
float: right;
font-size: 40px;
font-weight: normal;
padding-right: 20px;
color: rgba(100,100,100,0.9);;
}
.nav ul{
width: 150px;
list-style-type: none;
background: rgba(200,200,200,0.2);
border-radius: 5px;
}
#top-menu{
clear: both;
display: block;
float: right;
padding-left: 0px;
margin-top: 10px;
margin-right: 20px;
}
.links{
color: black;
font-size: 20px;
font-weight: normal;
}
.nav ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
color: #fff;
background-color: black;
border-left: thick solid red;
}
#wrapper{
margin-top: 50px;
}
.container{
width: 800px;
height: 600px;
margin: 0px auto;
background: rgba(200,200,200,0.2);
border-bottom: 1px solid rgba(200,200,200,1);
padding: 20px;
}
.active{
color: white;
background-color: rgba(100,100,100,1);
border-left: thick solid rgba(0,255,0,0.5);
}
jQuery
$(document).ready(function(){
$("div").mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
});
});
Source

How do i make a dynamic header resize itself?

I want to make header that resizes itself based on the size of the users screen. So far i have an image on the left and a menu on the right. i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image.
Here is the HTML code:
<body>
<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="header_logo"></div>
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home
<li>#
<li>#
<li>#
<li>#
</ul>
</div>
Here is the CSS code:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
float: left;
width: 100%;
height: 250px;
border: none;
}
#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}
.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}
.navbar li {
float: left;
list-style-type: none;
}
.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.navbar li a:hover{
color: #000000;
background-color:#0040FF;
}
Thank you i would be grateful for any help.

Then I would suggest to either keep the horizontal things in percentage or use css media queries.
percentage example is here:
HTML:
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<img src="images/logo.png" />
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
CSS:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
height: 250px;
}
#header_logo {
float: left;
width: 20%;
margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}
.navbar {
float: right;
margin-top: 125px;
margin-right: 5%;
text-align:right;
width: 60%;
}
.navbar li {
display:inline-block;
list-style-type: none;
}
.navbar li a {
display:block;
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font:bold 15px 'Open Sans', sans-serif;
}
.navbar li a:hover{
color: #000;
background-color:#0040FF;
}
Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/
Good luck!