div中的div不接受任何输入+ html

Question

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><a href="home.php">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Active Directory</a> <li><a href="#">HelpDesk</a> <li><a href="#">CTS</a> <li><a href="#">Exchange/Infra</a> <li><a href="#">Others</a> </ul> </li> <li><a href="#">Downloads</a></li> <li><a href="#">Blog</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact US</a></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"><a href="#" name="div1">Create Domain User</a></li> <li class="animate"><a href="#" name="div2">Domain Password Reset</a></li> <li class="animate"><a href="#" name="div3">Domain Joining</a></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'>DO:</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 DO..</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> 

Answer 1

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;)