Develop Reference

Show content based on active link in nav bar

I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website
.active-link {
position: relative;
display: flex;
top: 12rem;
/*position for active link */
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid red;
padding-bottom: 7px;
}
.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}
<div class="active-link" id="active-link">
<li>
<a class="button">Him</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">Her</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>
<script>
var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
const resetSlideContainers = () => {
[...document.querySelectorAll('.slide-container')].forEach((slide) =>
slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}
</script>
I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website
var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
})
}
.active-link {
position: relative;
display: flex;
top: 12rem;
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid blue;
padding-bottom: 7px;
}
<div class="active-link" id="active-link">
<li>
<a class="button">1</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">3</a>
</li>
</div>

I would create a container to hold the contents of each slide and link buttons to a slide using a data attribute. When a button is clicked, you can remove the active class of the previous slide and add a new one for the current slide. Here is the relevant code that I added with a Codepen link at the bottom.
<div class="active-link" id="active-link">
<li>
<a class="button" data-slide="slide-container-1">1</a>
</li>
<li>
<a class="button active" data-slide="slide-container-2">2</a>
</li>
<li>
<a class="button" data-slide="slide-container-3">3</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>
.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}
const resetSlideContainers = () => {
[ ...document.querySelectorAll('.slide-container') ].forEach((slide) => slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}
Here is a working example.

JQuery collapse div on img click

I have a two part question concerning CSS styling and JQuery functionality.
(most important): In my code below, when the user clicks the round profile image, hypothetically the "profiledrop" div should appear. If I replace the tag with plain text, the code works just fine. However, with an image instead of text as the link, the code no longer works.
(less important): What is causing the "notification-tab" div to be so large? It ends up coming out to almost 100px for each div, which is massive! I want to at least half this size. What part of the CSS code do I need to modify to accomplish this?
I've been typing this code for the last 10 hours, so I'm basically braindead at this point. I'm sure both answers are simple, but I'm just not seeing the solution. Thank you in advance for your help!
Codepin: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>
CSS:
/* Notification Infastructure */
.profiledrop {
position: absolute;
right: 15px; top: 65px;
display: none;
width: 350px; height: auto;
max-height: 600px;
padding: 0; margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;}
.notification-list{
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;}
.notification-list-item{
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even) {background-color: #E3E3E3}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px; height: 60px;
object-fit: cover}
/* Misc Settings */
.message::not(.nopic) {margin-top: 0px; margin-left: 80px} /* Style for notification groups without image */
/* Notification text styling */
.label{
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.message {margin-top: 0px}
.date {float: right; color: darkgray}
/* Active Section */
.active .notification-list {height: 250px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
/* Responsive design */
#media only screen and (max-width : 514px) {
body {margin: 0px}
.profiledrop{
width: 100%;
margin: 0px;
left: 0;}
}
.profile{
position: absolute;
top: 0%; right: 15px;
width: 40px;
clip-path: circle();}
.profile img{float:right; max-width: 100%; max-height: 100%; display: block;}
JQUERY:
// Tab collapser //
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
} else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});

'launch' should be on the img element, such as:
<div class="profile">
<a href="#">
<img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
</a>
</div>

I'll answer your second question first. The reason the notification tab is so large is that the .profiledrop class has a fixed width of 300px. Each notification group is inheriting the width of the parent, so those are also 300px. Each notification tab has a width of 100%, so its width becomes 100% of the nearest parent, which is the notification group, which is 300px, so that also becomes 300px.
To summarize this point, either change the width: 100% on the notification tab, or change the width: 300px on the profiledrop. I can't recommend which to do because I don't know what you want it to look like.
The simplest solution to your first question is to employ display: none. Take a look at the code snippet I've provided below and let me know if this is the behavior you're looking for.
const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");
// I attach an event listener to the image to wait for a click event
image.addEventListener("click", function() {
if (paragraph.style.display === 'none') {
// If the paragraph is currently hidden, I show it
paragraph.style.display = 'block';
} else {
// If the paragraph is currently shown, I hide it
paragraph.style.display = 'none';
}
})
<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the
image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click
on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. </p>

click outside burger menu to close using javascript

I have been making a burger menu that works on desktop, opens and closes with an event listener.
It works fine but then i wanted to make it so that if the use clicked outside of the burger menu it also closes the menu.
I found a bit of java script that uses some logic to say that if not the navigation then close menu. it works when you click outside the menu but then the problem is that the toggle stops closing the menu.
I split my code up into two sections.
The first code block is the code working with the toggle.
The second block is the code that i'm using to try and make the click outside the menu work.
I think i have been staring at this for to long and cant seem to find a solution.
thanks in advance for any help.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
a{
color: #fff;
}
.ic-burger{
width: 50px;
height: 50px;
background: #000;
display: block;
position: relative;
z-index: 10;
}
.ic-nav ul {
list-style: none;
padding-left: 0px;
display: flex;
flex-direction: column;
right: 0px;
top: 0px;
height: 100%;
position: fixed;
z-index: 5;
overflow: auto;
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}
html.ic-show .ic-nav:before{
content: '';
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
background-color: rgba(18,18,18,0.7);
z-index: 1;
width: 100%
}
.ic-second-level{
opacity: 0;
visibility: hidden;
transition: all 200ms linear;
padding: 0px;
padding-top: 100px;
background: #1e1e1e;
}
html.ic-show .ic-second-level{
opacity: 1;
visibility: visible;
}
</style>
<nav class="ic-nav">
<!-- <div class="ic-burger-bkg"> -->
<ul class="ic-burger-container">
<li>
<a href="javascript:void(0);" class="ic-burger" aria-expanded="false" aria-controls="menu" id="burger-icon">
<div class="nav-icon">
Burger <br>toggle
</div>
</a>
<!-- ############ -->
<ul class="ic-second-level" role="region" id="menu" aria-labeledby="burger-icon">
<li class="top-li">
About
</li>
<li class="top-li">
News
</li>
<li class="top-li">
Team
</li>
<li class="top-li">
Contact
</li>
</ul>
<!-- ############ -->
</li>
</ul>
<!-- </div> -->
</nav>
</body>
<script>
var documentElement = document.querySelector("html");
var sidebarIsOpen = () => documentElement.classList.contains("ic-show");
var openSidebar = () => {
documentElement.classList.add("ic-show");
};
var closeSidebar = () => {
documentElement.classList.remove("ic-show");
};
document.querySelector('.ic-burger').addEventListener("click", function() {
sidebarIsOpen() ? closeSidebar() : openSidebar();
});
</script>
</html>
Here is the second bit of code i cant get to play friendly with the first.
let sidebar = document.querySelector(".ic-second-level");
document.addEventListener("mouseup", function(event){
// If the event didn't originate from the open button or the sidebar, close it
if(event.target !== sidebar && event.target !== openSidebar){
closeSidebar();
}
});
these are the two sources ive used to help me
https://dev.to/tongrhj/the-mistake-developers-make-when-coding-a-hamburger-menu-1deg
Click Outside To close slide menu Javascript

I am using event delegation to check if you click on the "ic-nav" element and then close it. Works like charm.
document.addEventListener('click',function(e){
if(e.target && e.target.classList == 'ic-nav'){
sidebarIsOpen() ? closeSidebar() : openSidebar();
}
});
var documentElement = document.querySelector("html");
var sidebarIsOpen = () => documentElement.classList.contains("ic-show");
var openSidebar = () => {
documentElement.classList.add("ic-show");
};
var closeSidebar = () => {
documentElement.classList.remove("ic-show");
};
document.querySelector('.ic-burger').addEventListener("click", function() {
sidebarIsOpen() ? closeSidebar() : openSidebar();
});
document.addEventListener('click',function(e){
if(e.target && e.target.classList == 'ic-nav'){
sidebarIsOpen() ? closeSidebar() : openSidebar();
}
});
a{
color: #fff;
}
.ic-burger{
width: 50px;
height: 50px;
background: #000;
display: block;
position: relative;
z-index: 10;
}
.ic-nav ul {
list-style: none;
padding-left: 0px;
display: flex;
flex-direction: column;
right: 0px;
top: 0px;
height: 100%;
position: fixed;
z-index: 5;
overflow: auto;
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}
html.ic-show .ic-nav:before{
content: '';
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
background-color: rgba(18,18,18,0.7);
z-index: 1;
width: 100%
}
.ic-second-level{
opacity: 0;
visibility: hidden;
transition: all 200ms linear;
padding: 0px;
padding-top: 100px;
background: #1e1e1e;
}
html.ic-show .ic-second-level{
opacity: 1;
visibility: visible;
}
<nav class="ic-nav">
<!-- <div class="ic-burger-bkg"> -->
<ul class="ic-burger-container">
<li>
<a href="javascript:void(0);" class="ic-burger" aria-expanded="false" aria-controls="menu" id="burger-icon">
<div class="nav-icon">
Burger <br>toggle
</div>
</a>
<!-- ############ -->
<ul class="ic-second-level" role="region" id="menu" aria-labeledby="burger-icon">
<li class="top-li">
About
</li>
<li class="top-li">
News
</li>
<li class="top-li">
Team
</li>
<li class="top-li">
Contact
</li>
</ul>
<!-- ############ -->
</li>
</ul>
<!-- </div> -->
</nav>

Material Components: Keeping Menu "Open" when clicking inside

MATERIAL COMPONENTS FOR THE WEB (MENUS)
This question is in relation to the Menu Component:
I've modified the code so that the menu opens when hovered instead of clicked. I'm now trying to make the menu stay open or closed when certain elements inside the menu are clicked on..But I'm having trouble getting it to work.
Can anyone help?
Codepen Link:
https://codepen.io/oneezy/pen/prejpw
Example:
When <li class="wont-close"> is clicked, the menu won't close. menu.show();
When <li class="will-close"> is clicked, the menu will close. menu.hide();
Here's my attempts:
HTML
<section class="demo">
<div class="mdc-tab-bar">
<!-- Hover Toggle (Wrapper) -->
<div class="mdc-tab-wrapper hover-toggle">
<!-- Button (For Looks) -->
<a class="mdc-button mdc-button--raised mdc-button--primary mdc-tab mdc-ripple-upgraded" role="tab">
Hover Menu
</a>
<!-- Hover Menu (Toggles Show/Hide)-->
<nav class="mdc-simple-menu mdc-tab-items-wrapper" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<!-- Won't Close (When Clicked) -->
<li class="mdc-list-item wont-close clone-me" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">keyboard_arrow_right</i>
<span>Won't Close</span>
</a>
</li>
<!-- Will Close (When Clicked) -->
<li class="mdc-list-item will-close" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">close</i>
<span>Will Close</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
JS
/* Hover Tabs
*********************************/
function hoverTabs() {
var menuEls = document.querySelectorAll('.mdc-simple-menu');
menuEls.forEach((el, i) => {
var menu = new mdc.menu.MDCSimpleMenu(el);
var toggle = $(el).closest('.hover-toggle')[0];
var wontClose = $(el).closest('.wont-close'); // Not working...
var willClose = $(el).closest('.will-close'); // Not working...
toggle.addEventListener('mouseover', function() {
menu.show();
});
toggle.addEventListener('mouseleave', function() {
menu.hide();
});
/* Attempt #1 (Not working...)
*******************************************************/
// wontClose.addEventListener('click', function() {
// menu.show();
// });
// willClose.addEventListener('click', function() {
// menu.hide();
// });
/* Attempt #2 (Not working...)
*******************************************************/
// $('.wont-close').on('click', function(e) {
// e.preventDefault();
// menu.show();
// });
//
// $('.will-close').on('click', function(e) {
// e.preventDefault();
// menu.hide();
// });
});
}
$(document).ready(function() {
hoverTabs();
});

When in doubt, create a pure CSS solution...
I'm not accepting my answer as THE ANSWER because this is a hack.
I just want to include this here to show my quick fix that does the exact same thing (right on down to the cubic-bezier animation).
NOTE: I'm still using the Material Design Styles it ships with... Just not any of the JS.
Codepen: https://codepen.io/oneezy/pen/PKpJXV
HTML
<!-- Hover Toggle (Wrapper) -->
<div class="mdc-tab-wrapper hover-toggle clone-menu">
<!-- Button (For Looks) -->
<a class="mdc-button mdc-button--raised mdc-button--primary">Hover Menu</a>
<!-- Hover Menu (Toggles Show/Hide)-->
<nav class="mdc-simple-menu mdc-simple-menu--open" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<!-- Won't Close (When Clicked) -->
<li class="mdc-list-item clone-me" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">keyboard_arrow_right</i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
CSS
/* Reset
========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }
html,
body,
main { display: flex; flex-direction: column; height: 100%; }
section { padding: 5%; }
a { color: var(--mdc-theme-primary); }
h1 { background: black; color: white; padding: .25rem 1rem; position: relative; }
h1 span { font-weight: normal; font-size: 16px; position: absolute; right: 24px; top: 14px; display: inline-block; text-transform: uppercase; }
/* Material Design Menu
========================================================================= */
/* Menu Styles */
.wrapper { position: relative; display: flex; justify-content: space-between; }
.wrapper .hover-toggle { display: inline-block; position: relative; }
.wrapper .hover-toggle .mdc-button { z-index: 2; position: relative; color: white; min-width: auto; }
.wrapper .hover-toggle .mdc-simple-menu { width: 100%; top: 100% !important; position: absolute; right: 0 !important; left: 0 !important; z-index: 1; padding: 0; }
.mdc-simple-menu .mdc-list,
.mdc-simple-menu .mdc-list-group { padding: 0; }
/* Hover Effects */
.hover-toggle .mdc-simple-menu--open { opacity: 0; transform: scale(0, 0) translateY(-40px); transition: .2s cubic-bezier(0, 0, 0.2, 1); position: absolute; transform-origin: left top 0px; left: 0px; top: 0px; }
.hover-toggle:hover .mdc-simple-menu--open { opacity: 1; transform: scale(1,1) translateY(0); }
.mdc-simple-menu .mdc-list-item:before { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity .12s cubic-bezier(0,0,.2,1); transition: opacity .12s cubic-bezier(0,0,.2,1); border-radius: inherit; background: var(--mdc-theme-primary); content: ""; }
.mdc-simple-menu .mdc-list-item:hover:before { opacity: .1; }
.mdc-simple-menu .mdc-list-item:active:before { opacity: .2; }

how i can set my CSS dropdown menu its works fine at "margin-top:0" but dont work at "margin-top:135"?

EDIT: its working fine in IE but not in chrome browser
i made CSS dropdown menu in my web page which will be applied on all pages but navigation bar works fine at top but didn't work at margin-top:135 or any other place. how can i fix this error in my asp.net website. please anyone help me... At "margin-top:135" no submenu can be selected.
html code
<div style="position:absolute; top: 3px; left: 179px; height: 165px; width: 944px;"
id="cont">
<ul id="sddm">
<li><a href="index.aspx">
Home</a>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Company</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
About Us
GEPCO BoD
Top Management
Organizational Chart
Telephone Directory
Consumer
Existing Stuff Strength
</div>
</li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Customer Service</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Electric Tariff
Print Duplicate Bill
Customer Centered
Load Shedding Schedule
Consumer Service Manual
Safety Guide
Procedures
</div></li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">News & Media</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Tender
Press Release
Jobs
</div>
</li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">Downloads</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
For Customer
For Employee
</div></li>
<li><a href="#" >FAQs</a></li>
<li>
<a href="#"
onmouseover="mopen('m5')"
onmouseout="mclosetime()">Usefull Links</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
About Us
GEPCO BoD
Top Management
Organizational Chart
Telephone Directory
Consumer
Existing Stuff Strength
</div>
</li>
</ul>
</div>
CSS code
<style type="text/css">
#sddm
{
margin-top:135px;
padding:0;
}
#sddm li
{
padding:0;
list-style: none;
float: left;
font: bold 11px arial;
}
#sddm li a
{ display: block;
margin: 0 0 0 0;
border:none;
padding: 4px 10px;
height:20px;
width: 100px;
background: #5970B2 url('index/blue.png');
color: #FFF;
text-align: center;
text-decoration: none;
}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
margin-left:0px;
background: #49A3FF;
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 0;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style>
JAVASCRIPT code
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id) {
// cancel close timer
mcancelclosetime();
// close old layer
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime() {
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-o
ut
document.onclick = mclose;

As you are using position:absolute to your div, it's depend on it's parent as well. Make sure that you have a div or any other parent that have position:relative and go with top:135px; instead of margin-top.

`http://jsfiddle.net/XUWmx/`
check it if this work for you !