My hamburger menu doesn't seem to work. When I click on the hamburger icon itself nothing happens. I have used this exact same code before and it works perfectly fine there. The menu items just slide open when I click on the menu. I have a feeling that I'm doing something wrong with giving the javascript code the right Classes/ID's. But I'm not really sure.
Does anyone have a clue of whats wrong?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stefan's menu's - 2</title>
<link href="main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav>
<div id="hamburger-menu">
<div class="icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="menu">
<li><a>Home</a></li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
}
.icon {
width: 35px;
margin: auto;
}
ul#menu > li {
width: 100%;
display: block;
}
ul#menu > li > ul.submenu {
display: none;
border: 1px solid #FF6347;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-color: #f3f3f3;
}
ul#menu a {
display: block;
padding: 1em; /* met 1em word de ruimte tussen de list items 2x zo groot */
font-family: sans-serif;
color: #FF4136;
text-decoration-line: none;
font-weight: bold;
}
.submenu {}
JavaScript:
$(document).ready(function(){
$('.icon').on('click', function () {
$("#menu").slideToggle();
});
$('#menu a').on('click', function() {
$(this).siblings('.submenu').slideToggle();
});
});
Related
So we need to make a header from a soccer site for a school project, so i got https://www.granadacf.es/en. So my question is how do i make the text and the header like it is on the image. My image doesn't stay in the middle when resizing the website and the text isnt centered, like theres too much space.
This is my code so far.
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
min-height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav{
position: relative;
top: 40px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
justify-content: space-between;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="images/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
</ul>
</div>
</body>
</html>
I am working on a web application with multiple pages, and am working on styling a navigation bar for my users to go through the different pages. However, when I try to link the navigation bar to the pages, something is going wrong. When I preview the code, clicking on the different tabs doesn't redirect me to the corresponding pages. Attached is my code so far.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Contact</li>
<li>About</li>
</ul>
<div id="home">
<h1>Welcome!</h1></div>
<div id="contact" style="visibility: hidden">
<h2>you can reach me
at:</h2></div>
<style>
#home {
background-color: honeydew;
}
</style>
<style>
#contact {
background-color: lightblue;
}
</style>
</body>
</html>
I am trying to make the navigation menu link to different pages of my website (for example, they can go to "contact", and view information regarding that topic). However, the links with this code aren't working. When I click on the different tabs, it does not show the corresponding page. How do I fix this?
Thank you!
try below code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
#home {
background-color: honeydew;
}
#contact {
background-color: lightblue;
}
#about {
background-color: darkblue;
}
</style>
</head>
<body>
<ul>
<li><a onclick="showDiv('home');" class="active" href="#home">Home</a></li>
<li><a onclick="showDiv('contact');" href="#contact">Contact</a></li>
<li><a onclick="showDiv('about');" href="#about">About</a></li>
</ul>
<div id="home">
<h1>Welcome!</h1>
</div>
<div id="contact">
<h2>you can reach me
at:</h2>
</div>
<div id="about">
<h2>about us
at:</h2>
</div>
<script>
function showDiv(id) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById(id).style.display = "block";
}
showDiv('home');
</script>
</body>
</html>
I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.
I'm a student learning some really basic HTML coding and I decided to use a simple JavaScript navigation bar so that the drop down menu has some animation speed.
The navigation bar was previously working but after adding my image slider it stopped working.
Thanks for the help!
// JavaScript NavBar
$( document ).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function () {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function () {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin:0;
padding:0;
}
body{
background:url(../images/subtle_white_mini_waves.png) repeat;
font-family:Tahoma, Geneva, sans-serif;
color: white;
}
#navbar{
margin-left:-400px;
position:absolute;
left:50%;
}
#navbar a{
text-decoration:none;
}
.button{
background:url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover{
background:#e6e6e6;
}
.button a{
padding: 34px 0px;
}
#navbar ul{
text-align:center;
}
#navbar ul li{
float: left;
display: inline;
font-size:16px;
height:89px;
}
#navbar ul li:hover{
background:#E6E6E6;
}
#navbar ul li a{
display:block;
color: #444;
}
#navbar ul li ul{
position:absolute;
width: 170px;
background:#fff;
}
#navbar ul li ul li{
width: 170px;
}
#navbar ul li ul li a{
display:block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a{
background:#f7f7f7;
}
#navbar ul li ul.fallback{
display:none;
}
#navbar ul li:hover ul.fallback{
display:block;
}
.shadows{
position:absolute;
z-index:10;
}
#shadowtopleft{
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowtopright{
float:left;
}
#shadowbottomleft{
margin-top: 83px;
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowbottomright{
margin-top: 83px;
float:left;
}
.banner {
z-index:-1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display:block;
float:left;
padding: 0px;
margin: 0px;
min-height:500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation</li>
<li>Family Strengthening</li>
<li>Community Integration</li>
<li>Support Programmes</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate</li>
<li>Volunteer</li>
<li>Sponsor</li>
<li>Partner</li>
<li>Join The Staff</li>
</ul>
</li>
<li>
<div id="logo">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board</li>
<li>News and Views</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
</ul>
</div>
<script>
$( document ).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
Since you are a student, you might have not of heard of the z-index style property. The z-index property specifies the stack order of an element, especially if you are using position: absolute; a lot.
So your menu menu, #navbar, is there. It's just hidden under other elements, so you might want to add the z-index style to your code, like this:
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
I also thought that I'd mention that in your CSS code, you made a tiny error:
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
Should be:
.banner ul {
list-style:none;
padding: 0px;
margin: 0px;
}
I combined my answer and put it inside if the code snippet below.
// JavaScript NavBar
$(document).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function() {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function() {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/subtle_white_mini_waves.png) repeat;
font-family: Tahoma, Geneva, sans-serif;
color: white;
}
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
#navbar a {
text-decoration: none;
}
.button {
background: url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover {
background: #e6e6e6;
}
.button a {
padding: 34px 0px;
}
#navbar ul {
text-align: center;
}
#navbar ul li {
float: left;
display: inline;
font-size: 16px;
height: 89px;
}
#navbar ul li:hover {
background: #E6E6E6;
}
#navbar ul li a {
display: block;
color: #444;
}
#navbar ul li ul {
position: absolute;
width: 170px;
background: #fff;
}
#navbar ul li ul li {
width: 170px;
}
#navbar ul li ul li a {
display: block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a {
background: #f7f7f7;
}
#navbar ul li ul.fallback {
display: none;
}
#navbar ul li:hover ul.fallback {
display: block;
}
.shadows {
position: absolute;
z-index: 10;
}
#shadowtopleft {
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowtopright {
float: left;
}
#shadowbottomleft {
margin-top: 83px;
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowbottomright {
margin-top: 83px;
float: left;
}
.banner {
z-index: -1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display: block;
float: left;
padding: 0px;
margin: 0px;
min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation
</li>
<li>Family Strengthening
</li>
<li>Community Integration
</li>
<li>Support Programmes
</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate
</li>
<li>Volunteer
</li>
<li>Sponsor
</li>
<li>Partner
</li>
<li>Join The Staff
</li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</a>
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board
</li>
<li>News and Views
</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities
</li>
<li>Feedback
</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
I have a drop down menu on the top of my page and I am trying to get that to top of the center on my page. It won't go center and now that drop down effect won't work. if you can solve this problem I'll really appreciate that or you can show me an other cool drop down menu which will work.
<!DOCTYPE html>
<HEAD>
<TITLE> </TITLE>
<LINK href="to.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV ID="header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>HOME
</li>
</li>
<li> dropdown #1
<ul>
<li>dropdown #1 item #1
</li>
<li>dropdown #1 item #2
</li>
<li>dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>dropdown #2 item #1
</li>
<li>dropdown #2 item #2
</li>
<li>dropdown #2 item #3
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
</DIV>
</DIV>
<DIV ID="wrapper">
<DIV ID="content_area">
<p> </p>
<center>
<video width="900" height="550" controls autoplay>
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object>
</video>
</center>
</DIV>
</DIV>
<DIV ID="footer">
Hello and Welcome --------------
</DIV>
</BODY>
</HTML>
CSS:
body {
margin:0;
padding:0;
min-width:525px;
font-family: Arial;
font-size: 17px;
background-image:url('fifa2.jpg');
}
#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
backgroundcolor:
}
#footer {
float: left;
width: 100%;
background-color: #000000;
font-size: 14pt;
font-weight: bold;
text-align: center;
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}
#wrapper {
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}
#left_side {
position: relative;
float: left;
width: 200px;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #66CCCC;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 350px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
video {
margin-top: 250px;
}
Your HTML formatting is wrong. Change it as below
FIDDLE DEMO
<div id="header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>HOME
</li>
<li> dropdown #1
<ul>
<li>dropdown #1 item #1
</li>
<li>dropdown #1 item #2
</li>
<li>dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>dropdown #2 item #1
</li>
<li>dropdown #2 item #2
</li>
<li>dropdown #2 item #3
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<div id="wrapper">
<div id="content_area">
<p></p>
</div>
</div>
<DIV ID="footer">Hello and Welcome --------------</DIV>
I encourage you to use jQuery UI's Menu.
Example (took from the page above):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled">Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li>Delphi
<ul>
<li class="ui-state-disabled">Ada</li>
<li>Saarland</li>
<li>Salzburg an der schönen Donau</li>
</ul>
</li>
<li>Saarland</li>
<li>Salzburg
<ul>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Perch</li>
</ul>
</li>
<li class="ui-state-disabled">Amesville</li>
</ul>
</body>
</html>