We Keep Coding

How to show full width background color on tree node CSS

I have created a tree and there is background-color change on hover of tree node. I want to show background-color on full width like in this example(on click of any node it shows gray color).
But the element on which I am applying the background-color is not full width itself. How can I achieve this?
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover {
background-color: lightblue;
}
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

You can use pseudo element to simulate the background and make it overflowing:
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-40px; /*adjust this*/
right:0;
bottom:0;
z-index:-1;
}
Full code:
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
/*added this*/
.tree__root>.tree__root-node>.tree__node-header {
overflow:hidden;
}
/**/
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover,
.tree__node-header:hover:after { /*Added this*/
background-color: lightblue;
}
/*Added this*/
.tree__node-header {
position:relative;
}
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-45px;
right:0;
bottom:0;
z-index:-1;
}
/* */
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

Create Selectable li items as buttons

I have a user interface with buttons made of list items. I want to be able to have them be individually selectable, where they will control the color of another div. Right now I have them laid out and they have a css transition where they grow in scale when hovered over but I want then to stay fully scaled when selected. How would I do this?
I tried using the focus pseudo-class but that only works on input elements. I also tried active pseudo class but I think I am missing something with using those.
Lastly, what would I do if I want them to change the background color of another div to the color of the button?
I haven't built the elements that will be effected yet, I was just going to use some divs shaped like squares with a background color to test, but I am stuck at this point with giving the list items active states. There is probably some JS aspect to this that I am missing.
Here is my code:
HTML:
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
CSS:
/*reset*/
html, body, ul, li, p, a, img, hr{
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection {
width: 320px;
height: 720px;
background-color:#d4d4d4;
display: inline-block;
}
.selector{
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica,arial,sans-serif;
font-size: 20px;
color:black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
cursor: pointer;
}
.swatch:hover{
transform: scale(1.3);
}
.crossbar{
border:1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}
.one{
margin-left: 0px;
background-color:#ffdc01;
border-color:white;
transition: border .01s;
}
.one:hover, .one:active {
border-color:#ffdc01;
}
.two{
background-color:#f27245;
border-color:white;
transition: border .01s;
}
.two:hover, .two:active {
border-color:#f27245;
}
.three {
background-color:#db3844;
border-color:white;
transition: border .01s;
}
.three:hover, .three:active {
border-color:#db3844;
}
.four {
background-color:#754c90;
border-color:white;
transition: border .01s;
}
.four:hover, .four:active {
border-color:#754c90;
}
.five{
background-color:#005c9f;
border-color:white;
transition: border .01s;
}
.five:hover, .five:active {
border-color:#005c9f;
}
.six{
background-color:#343333;
border-color:white;
transition: border .01s;
}
.six:hover, .six:active {
border-color:#343333;
}
.seven {
background-color:#6a6c70;
border-color:white;
transition: border .01s;
}
.seven:hover, .seven:active {
border-color:#6a6c70;
}
.eight {
background-color:#e9eae8;
border-color:white;
transition: border .01s;
}
.eight:hover, .eight:active {
border-color:#e9eae8;
}
https://jsfiddle.net/cf2zxf88/2/

I want then to stay fully scaled when selected. How would I do this?
With a CSS class .scale { transfrom: scale(1.3) } that can be used by JavaScript with el.classList.add() and el.classList.remove().
Lastly, what would I do if I want them to change the background color
of another div to the color of the button?
Access all list items with document.querySelectorAll()
Add a click event to each list item
Get the background color with Window.getComputedStyle(el, null).getPropertyValue("background-color")
In total
(Added class .scale and <div id="bg"></div>)
var colorButtons = document.querySelectorAll(".swatchSelector > li"),
bg = document.getElementById("bg"),
curr = 0;
for (var i = 0; i < colorButtons.length; i += 1) {
(function(i) {
colorButtons[i].addEventListener("click", function() {
bg.style.backgroundColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
colorButtons[curr].classList.remove("scale");
curr = i;
colorButtons[curr].classList.add("scale");
})
})(i);
}
colorButtons[curr].classList.add("scale");
bg.style.backgroundColor = window.getComputedStyle(colorButtons[curr], null).getPropertyValue("background-color");
/*reset*/
html,
body,
ul,
li,
p,
a,
img,
hr {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection,
#bg {
vertical-align: top;
width: 320px;
height: 720px;
background-color: #d4d4d4;
display: inline-block;
}
.selector {
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica, arial, sans-serif;
font-size: 20px;
color: black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.swatch:hover,
.scale {
transform: scale(1.3);
}
.crossbar {
border: 1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}
.one {
margin-left: 0px;
background-color: #ffdc01;
border-color: white;
transition: border .01s;
}
.one:hover,
.one:active {
border-color: #ffdc01;
}
.two {
background-color: #f27245;
border-color: white;
transition: border .01s;
}
.two:hover,
.two:active {
border-color: #f27245;
}
.three {
background-color: #db3844;
border-color: white;
transition: border .01s;
}
.three:hover,
.three:active {
border-color: #db3844;
}
.four {
background-color: #754c90;
border-color: white;
transition: border .01s;
}
.four:hover,
.four:active {
border-color: #754c90;
}
.five {
background-color: #005c9f;
border-color: white;
transition: border .01s;
}
.five:hover,
.five:active {
border-color: #005c9f;
}
.six {
background-color: #343333;
border-color: white;
transition: border .01s;
}
.six:hover,
.six:active {
border-color: #343333;
}
.seven {
background-color: #6a6c70;
border-color: white;
transition: border .01s;
}
.seven:hover,
.seven:active {
border-color: #6a6c70;
}
.eight {
background-color: #e9eae8;
border-color: white;
transition: border .01s;
}
.eight:hover,
.eight:active {
border-color: #e9eae8;
}
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one scale"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
<div id="bg"></div>

Dropdown pushing logo downwards

I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!

Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>

try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here

Why does the dropdown menu animation cut the height when you hover again?

I've recently implemented this HTML, CSS and jQuery code from MegaDrop. Like any dropdown menu, it's supposed to show all the links when you hover over it.
Please hover on Products to see the result.
The problem starts when you hover away and when you hover again before the animation is finished, it will cut the height and remembers that. It will also not respond after you hover on and off a couple of times. Which is odd.
I've set no height in the container. I just let it render natively since the links have padding.
The container has overlay: hidden as well.
To enable the jQuery animation I need to remove display: block from .nav > li:hover > div
My question is, how do I prevent this? Do I need to give more instructions to the jQuery itself in order to retain the height of the container and not to shorten it?
This is the site:
http://planet.nu/dev/test/index.html
Here are my HTML, CSS and Javascript:
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

Ah! Looks like animate leaves some residual values in your div when its interrupted (inspections using firebug clearly shows this). Clearing it up before you start the animation should fix it.
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

I don't know enough about JavaScript to explain the intricate details, but you have to pass parameters to the stop() method to make the previous animation complete.
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop(null, true).slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});

Header Button's text/font-weight changing unintentionally

I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>

I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.