Develop Reference

display arrow below active active ul item

how can I achive something similar to the above ?
I tried adding active-item::bofore and positioning it absolute, with top:-28px. But my arrow doesn't display. I tried giving it z-index 1000; no luck it doesn't show:
#choose-cat {
width: 100%;
overflow: hidden;
box-sizing: border-box;
background: #fff;
border: 2px solid#b6d5e2;
border-radius: 4px;
margin: 0 auto;
padding: bottom 20px;
}
css:.cat-items {
position: relative;
}
.cat-items .active-item::before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
bottom: -28px;
left: calc(50% - 10px);
}
.cat-items .active-item::before {
content: "";
display: block;
position: absolute;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="choose-cat">
<ul class="cat-items list-group list-group-horizontal list-unstyled" >
<li class="col-sm-3 active-item active cat-col">
<div class="cat-item">
<div class="cat-icon">
<i class="fa fa-car cat-icon main-color" aria-hidden="true">
</i>
</div>
<div class="cat-text">
Automative Vehicles
</div>
</div>
</li> ....
</ul>
</div>

Here is a concept on how you can achieve the desired result. Of-course not the only way.
.menu {
border-bottom: 1px solid orange;
}
.menu ul {
margin: 0;
list-style: none;
}
.menu ul li {
display: inline-block;
padding-bottom: 25px;
}
.menu ul li span {
border: 1px solid red;
display: inline-block;
padding: 10px 20px;
}
.menu ul li:hover span,
.menu ul li.active span {
background-color: green;
}
.menu ul li:hover,
.menu ul li.active {
background-image: url("https://cdn4.iconfinder.com/data/icons/geomicons/32/672416-triangle-up-256.png");
background-size: 15px;
background-repeat: no-repeat;
background-position: 50% 110%;
}
<div class="menu">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li class="active"><span>Team</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>

I've added class cat-item to li element instead of div, then
.cat-item {
position: relative;
width: 140px;
}
.cat-items .active-item::before {
content: '';
display: block;
position: absolute;
top: 40px;
left: calc(50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
transform: translateX(-50%);
}

Get Json data and display on split window onclick html

I have following html code which displays a parent-child list on left pane. I want to format json data corresponding to each item during onclick and display the same on right pane.
But this displays only Parent's data even if I click on children.
Following is the html code:
function getDetails(dom) {
var jsonDataInString = dom.getAttribute("data-json"),
jsonData = JSON.parse(jsonDataInString),
ServiceElement = document.getElementById("Service"),
PortElement = document.getElementById("Port"),
NumberOfProcessElement = document.getElementById("NumberOfProcess"),
HostsElement = document.getElementById("Hosts");
if (jsonData) {
ServiceElement.innerText = jsonData.Service;
PortElement.innerText = jsonData.Port;
NumberOfProcessElement.innerText = jsonData.NumberOfProcess;
Hosts.innerText = jsonData.Hosts;
}
}
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
.tree li:last-child::before {
height: 30px;
}
.tree li r {
border: 1px solid #080808;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
word-wrap: break-word;
background-color: Tomato;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li g {
border: 1px solid #080808;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
word-wrap: break-word;
background-color: LightGreen;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: white;
}
.right {
right: 0;
background-color: #ccc;
word-wrap: break-word;
}
<div class="split left">
<div class="tree" id="tree">
<ul>
<li onclick="getDetails(this)" data-json='{"Service":"ParentService","Hosts":"[\"parent.dev.com\"]","NumberOfProcess":"5","Port":"15080"}'>
<g href="#">ParentService</g>
<ul>
<li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child1.dev.com\"]","Port":"14758"}'>
<g href="#">child1</g>
</li>
<li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child2.dev.com\"]"}'>
<r href="#">child2</r>
</li>
<li onclick="getDetails(this)" data-json='{"Service":"ChildService","Hosts":"[\"child3.dev.com\"]"}'>
<r href="#">child3</r>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="split right">
<label for="Service"><b>Service:</b> </label>
<span id="Service"></span>
<br>
<label for="Port"><b>Port:</b> </label>
<span id="Port"></span>
<br>
<label for="NumberOfProcess"><b>Number Of Process:</b> </label>
<span id="NumberOfProcess"></span>
<br>
<label for="Hosts"><b>Hosts:</b> </label>
<span id="Hosts"></span>
</div>

You need to stop the propagation. Whenever you clicked a child, your click propagated to the parent
Here is an unobtrusive version
function getDetails(e) {
e.stopPropagation(); // cancel the event bubble
var jsonDataInString = this.getAttribute("data-json"),
jsonData = JSON.parse(jsonDataInString),
ServiceElement = document.getElementById("Service"),
PortElement = document.getElementById("Port"),
NumberOfProcessElement = document.getElementById("NumberOfProcess"),
HostsElement = document.getElementById("Hosts");
if (jsonData) {
ServiceElement.innerText = jsonData.Service || "Not available";
PortElement.innerText = jsonData.Port || "Not available";
NumberOfProcessElement.innerText = jsonData.NumberOfProcess || "Not available";
Hosts.innerText = jsonData.Hosts || "Not available";
}
}
document.querySelectorAll("[data-json]").forEach(function(el) {
el.addEventListener("click",getDetails,false);
});
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
.tree li:last-child::before {
height: 30px;
}
.tree li r {
border: 1px solid #080808;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
word-wrap: break-word;
background-color: Tomato;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li g {
border: 1px solid #080808;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
word-wrap: break-word;
background-color: LightGreen;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: white;
}
.right {
right: 0;
background-color: #ccc;
word-wrap: break-word;
}
<div class="split left">
<div class="tree" id="tree">
<ul>
<li data-json='{"Service":"ParentService","Hosts":"[\"parent.dev.com\"]","NumberOfProcess":"5","Port":"15080"}'>
<g href="#">ParentService</g>
<ul>
<li data-json='{"Service":"ChildService","Hosts":"[\"child1.dev.com\"]","Port":"14758"}'>
<g href="#">child1</g>
</li>
<li data-json='{"Service":"ChildService","Hosts":"[\"child2.dev.com\"]"}'>
<r href="#">child2</r>
</li>
<li data-json='{"Service":"ChildService","Hosts":"[\"child3.dev.com\"]"}'>
<r href="#">child3</r>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="split right">
<label for="Service"><b>Service:</b> </label>
<span id="Service"></span>
<br>
<label for="Port"><b>Port:</b> </label>
<span id="Port"></span>
<br>
<label for="NumberOfProcess"><b>Number Of Process:</b> </label>
<span id="NumberOfProcess"></span>
<br>
<label for="Hosts"><b>Hosts:</b> </label>
<span id="Hosts"></span>
</div>

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

div inside a div is not accepting any input + html

I have a vertical navigation bar on my website. When I click on a link in the navigation bar the content is shown in the content div. My problem is that content that is shown in the content div is a form and it is not accepting any input. Help me out
/*right click disable*/
/*$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});*/
$('.nav1', this).hide();
//drop down -logout
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
/* drop down for sidebar*/
$(document).ready(function() {
$("#kl").click(function() {
$("#kll").toggle();
});
});
/* show div */
$(document).ready(function() {
$('a').click(function() {
var divname = this.name;
$("#" + divname).show().siblings().hide();
});
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 40px 100px;
float: left;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 200px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: -100;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
display: block;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
#container {
float: right;
border: 1px solid black;
position: relative;
width: 700px;
margin: 30px auto;
font-family: raleway z-index: -100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!---header and side bar for user name and logout menu -starts here -->
<div class = "nav">
<ul>
<li>Home</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads</li>
<li>Blog</li>
<li>News</li>
<li>Contact US</li>
</ul>
</div>
<!--horizantal navigation bar ends here -->
<!---vetical navigation bar starts here-->
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User</li>
<li class="animate">Domain Password Reset</li>
<li class="animate">Domain Joining</li>
</ul>
</div>
<!---vetical navigation bar ends here-->
<div class="content">
<div id="div1" style="display:none">
<!---->
<div id="AD-FORM">
<h2>AD-FORM</h2>
<form name="adform" action="/" onsubmit="return validateForm()" method="post">
<label>Emp ID :</label>
<input id="id" name="empid" placeholder="" type="text">
<br>
<br>
<label>Full Name :</label>
<input id="name" name="FName" placeholder="Enter your full name" type="text">
<br>
<br>
<label>Designation:</label>
<input id="name" name="desig" placeholder="Enter your Designation" type="text">
<br>
<br>
<label for='DO'>D.O:</label>
<br>
<select name="DO" style="WIDTH: 195px; padding: 2px; margin-top: 2px; border: 2px solid #ccc; padding-left: 2px; font-size: 16px; font-family: raleway">
<option value="">Select a D.O...</option>
<option value="AHMEDABAD">AHMEDABAD</option>
<option value="BANGLORE">BANGLORE</option>
<option value="CHENNAI">CHENNAI</option>
<option value="COIMBATORE">COIMBATORE</option>
<option value="DELHI">DELHI</option>
<option value="ERNAKULAM">ERNAKULAM</option>
<option value="HYDERABAD">HYDERABAD</option>
<option value="KARUR">KARUR</option>
<option value="KOLKATA">KOLKATA</option>
<option value="MADURAI">MADURAI</option>
<option value="MUMBAI">MUMBAI</option>
<option value="SALEM">SALEM</option>
<option value="TAMBARAM">TAMBARAM</option>
<option value="TRICHY">TRICHY</option>
<option value="VIJAYAWADA">VIJAYAWADA</option>
<option value="VISAKHAPATNAM">VISAKHAPATNAM</option>
</select>
<br>
<br>
<label>BranchCode:</label>
<input id="name" name="branch" placeholder="Enter your BranchCode" type="number" min="1000" max="9999">
<br>
<br>
<input name="submit" type="submit" value=" Submit ">
</form>
</div>
</div>
<!---->
<div id="div2" style="display:none">
</div>
<div id="div3" style="display:none">
Another Test
</div>
<div id="div4" style="display:none">
Final Test
</div>
</div>

z-index of content div is wrong
use this styling for content and it will work for you
.content {
border: 1px solid black;
position: absolute;
left: 37%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: 222222;
height: 100%;
padding: 12px;
}
and if you want that your form div should be beside the
left menu div. than you have to try something else.
fiddleLink;)

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.