Develop Reference

I have three drop down button I want to click the specific dropdown and pop up the list and display on the that specific click dropdown , not in all

I have three drop down button that I style them using the same class. When I click any of them it pops up a list where I select any list under the dropdown and display it on the button.
The problem is that it's displaying in all of the three dropdowns even though I focus on the specific drop down and I am voiding to have along code by changing each an every dropdown an ID and target on it. If there's away to do it may you please help.
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
height: 0px;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20;
position: absolute;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You can try it like this:
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
I've also changed your css a little bit. I've removed height:0px from ul.menu and added display:none;
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You are not too clear in your answer, and you are providing no working code,
But If I get it, you need to show on the button the text you click in the submenu, like "emulating a select".
It's quite easy.
So, on the 3 main parents add a class
<div class="wrapCollect3 buttonParent">
[...]
<div class="wrapper buttonParent">
[...]
<div class="collecWrap buttonParent">
In js, add a function to retrieve them on click
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
call it like this:
// In your onclick function,
// given "el" as the clicked submenu button
let parent = getParentByClass(el, "buttonParent")
Now find the button inside the buttonParent of the clicked submenu, and set its text as the text you clicked in the submenu
parent.querySelector('button').innerText = el.getText();
Now you just need to fix the "hide" submenu when you click outside the submenu. I leave this exercise to you, because this is not "code solution" website, and we are here always to learn! Cheers!
/// Taken from Carsten Løvbo Andersen answer
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
//// Maybe there is some jquery version, but this is universal
/// this find parent by class name, giving a depth in search too
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
document.querySelectorAll("ul.menu li").forEach(function(el){
el.addEventListener('click', function(c){
let li = c.target;
let t = li.innerText;
let p = getParentByClass(li, 'parentButton');
p.querySelector('button').innerText = t;
$('.menu').hide();
});
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3 parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

Navbar works from my computer but not on the internet

I have 2 versions of a website i made one in english one in french. The navbar for the english version works perfectly on my computer and live on the internet so When i test the french website version on my computer the navbar works exactly as it should yet when live on the internet it's stuck at the top of the page, where as its suppose to be about 5 cms under the top. Here is the html and css code:
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">
<li>Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<a href="à propos de.html" class="dropdown-toggle" data-
toggle="dropdown">à propos de</a>
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</li>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
</ul>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
</div>
</nav>
<!-- Header Navbar End -->
</header>
CSS:
.header--navbar > .container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links > li {
float: none;
}
.header--nav-links > li > a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links > .dropdown > .dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links > .dropdown > .dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links > .dropdown > .dropdown-menu .dropdown-menu > li > a {
padding-left: 40px;
padding-right: 40px;
}

Quite a few of your tags (ul, li, also div) aren't closed properly in the code you posted. Browsers will try to interpret this in some way, but not necessarily the way you intended it, so this might be a cause for your problem.
I fixed those unclosed tags in the snippet below. It's hard to check your CSS, since most of the CSS rules you posted don't apply at all in the snippet, since they use the class .header--nav-links and similar in their selectors which isn't included in your HTML code.
Nevertheless, maybe the edited HTML code already fixes the display problem you are mentioning.
.header--navbar>.container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links>li {
float: none;
}
.header--nav-links>li>a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links>.dropdown>.dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links>.dropdown>.dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links>.dropdown>.dropdown-menu .dropdown-menu>li>a {
padding-left: 40px;
padding-right: 40px;
}
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
à propos de
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</ul>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
<!-- Header Navbar End -->

How to handle event Handler in jQuery 3.4.1

It shows two events at same time:
jQuery Code:
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu=$(this).parent().find('.submenu');
submenu.addClass('active');
}
HTML:
<ul class="profile-menu">
<li>
<a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as User</a>
</li>
<ul class="profile-submenu submenu ">
<li>Login</li>
<li> Logout</li>
<li>Options</li>
<li>Circus</li>
</ul>
</ul>
CSS:
.submenu{
list-style: none;
padding: 0px;
border: 1px solid #aaa;
background: #fff;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
width: 250px;
position: absolute;
right: 20px;
display: none;
}
.submenu.active{ display: block; }
This program should show the menu on top right corner when touch on "User Logged in" but it can't.

Why is my link for my div linking to my other content?

I'm creating a div that gives info about a course. By this information, is the price of the course and a button that says "Take Class" that links to the purchase page. However, the link is leaking into the other info.
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
a {
text-decoration: none;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* courses.php */
/* course intro */
#course_body {
background: #F4F4F4;
}
#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}
#intro_title {
width: 562px;
position: relative;
top: 2px;
}
#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}
/* end of course intro */
/* course facts */
/* Price Information */
#price_tag {
font-size: 32px;
font-weight: bold;
color: #373737;
position: relative;
top: -15px;
}
#price_div {
background: #17AA1C;
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 18px;
width: 116px;
font-weight: normal;
position: relative;
top: 12px;
border-radius: 3px;
}
#price_div:hover {
background: #159D1A;
}
#price_div {
text-decoration: none;
}
/* End of Price Information */
#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 675px;
font-size: 20px;
height: 115px;
}
.Rating {
position: relative;
width: 125px;
height: 25px;
top: -111px;
left: 180px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
#facts_ratings {
position: relative;
top: -110px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
left: 175px;
}
#course_length {
position: relative;
top: -100px;
left: 185px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}
/* end of course facts */
/* skill level */
#course_skillText {
position: relative;
top: -190px;
left: 310px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}
.fillSquare {
width: 12px;
height: 12px;
background: #666;
}
.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}
#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}
/* end of skill level */
/* language */
#course_language {
position: relative;
top: -154px;
left: 235px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#language_type {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
position: relative;
left: 153px;
}
/* end of language */
/* Wish List button */
#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}
#empty_heart {
color: #FF827F;
}
#course_wish_text {
position: relative;
left: 5px;
}
/* End of Wish List button */
/* Teacher div */
#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
text-align:center;
}
#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
}
#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
}
#teacher_div a {
text-decoration: none;
color: #00698C;
}
#teacher_div a:hover {
text-decoration: underline;
}
#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
}
#course_line {
width: 325px;
height: 1px;
background: #DDD;
}
#teacher_info {
width: 325px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align:left;
}
/* End of Teacher div */
/* Course Learn */
#course_learn {
background: white;
border: 1px solid #DDD;
width: 280px;
position: relative;
top: -660px;
left: 674px;
font-family: 'Open Sans', sans-serif;
padding: 15px;
max-height: 240px;
font-size: 18px;
overflow: hidden;
background-image: rgba(244,244,244,0);
}
#course_learn li {
font-size: 15px;
color: #353535;
padding: 5px;
text-align: left;
}
/* End of Course Learn */
/* end of courses.php */
<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->
<!-- Course Facts -->
<div id='course_facts'>
<!-- Purchase Information -->
<span id='price_tag'> $30 <br>
<a href='#'> <div id='price_div'> Take Class </div> </a>
</span>
<!-- End of Purchase Information -->
<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4.28"></meter>
</div>
<!-- End of Star Ratings -->
<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->
<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>
<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->
<span id='skill_level'> Intermediate </span>
</span> </span>
<!-- End of Skill Level -->
<!-- Language -->
<span id='course_language'> Language <br> <span id='language_type'> English </span> </span>
<!-- End of Language -->
<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->
</div>
<!-- End of Course Facts -->
<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
<a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div> <br>
<div id='course_line'></div> <br>
<div id='teacher_info'> Hello! My name is Andy and I am a professional voice actor. Top-Rated & Featured Seller on Fiverr. Over 5K+ people served worldwide! Proud to be the voice for the Fiverr App! Providing voice services for Commercials, Narrations, E-Learning, Explainer Videos, Apps and more! See my reviews... </div>
</div>
<!-- End of Teacher Div -->
<!-- What you'll learn -->
<div id='course_learn'>
<span id='learn_text'> What you'll learn </span>
<ul>
<li> Build a polished and fun platform game using GameMaker Studio. </li>
<li> Import image, sound, and background assets into GameMaker Studio. </li>
<li> Program using GameMaker Studio's built in scripting language GML (GameMaker Language). </li>
<li> Create game objects and control them using Events and Actions. </li>
<li> Design game levels using Rooms. </li>
</ul>
</div>
<!-- End of What you'll learn -->
To replicate this error, look for a line across from the button that is still a link beyond the button. Try going in the middle of Skill Level and Language...
How do I fix this problem?

<a href='#'> <div id='price_div'> Take Class </div> </a>
Maybe you want to change this to
<div id='price_div'><a href='/your-purchase-page-link.html'>Take Class</a></div>

Your div element is block level so it will automatically take the full width of the parent element (at least). You set its width but that is the width of the content. The node itself still occupies the full width.
To do what you want, set #price_div to display:inline-block; or do float:left; so it will collapse to the width you want.
By setting inline-block, you are making the div behave like a text box, able to contain its text contents but still behave like a block level element so you can set its width and height.

Just add this to your css
#price_tag a { display: inline-block; }
span#price_tag:after {
display: block;
content: "";
}
Your a is inline element, you need to set it to inline-block or block element to be able to set it's width. Then using after you will shift rest of the content lower

change menu background color on selected

i need to change selected sub menu background color. but, i dont know how to change background color, when i click the submenu.
jsfiddle: http://jsfiddle.net/BJQ6y/
my Css code :
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
My Html CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Bharatanatyam</li>
<li>
<ul id="3">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Kuchipudi</li>
</ul>
Sailaja </li>
<li>
<ul id="4">
<li>About Sailasudha</li>
<li>Admission</li>
<li>Presentation</li>
<li>Recticals</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>Downloads</li>
</ul>
Sailasudha </li>
<li>
<ul id="5">
<li>Philosophy</li>
<li>
<ul id="6">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
Nrityanasangama </li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
My Doubt :
When i will click "Kuchipudi" menu, its sub menu will be open. That time "Kuchipudi" background will be change as selected menu.
When i will click "Bharatanatyam" menu, its sub menu will be open. That time "Kuchipudi" background will be change like as previously and "Bharatanatyam" background color will be change as selected menu. I dont know how to change, its background color change.

Would this edit to your fiddle work:
$('.sub_menu').click(function () {
$('a.submenu').removeClass('selected');
$(this).addClass('selected');
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
);
Then add this CSS:
.selected{background-color:#eee; //or whatever colour