I have the below style in my <head></head> to display my menu:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
}
</style>
The problem now is, a:link, a:visited AND a:hover, a:active, is displaying a box menu on my div image link. Here is the code:
<div id="content1">
<a href="inside_page.html">
<img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250"></a>
</div>
My question is: Is there a way I can stop it to display that menu box my image div space?
Here is the full code of the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Birds </title>
<link rel="stylesheet" type="text/css" href="birds2.css" />
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div class="menu">
<ul>
<li>Home</li>
<li>Birds In Danger</li>
<li>Birds Habitants</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="flash"> Flash messaging area</div>
<div id="content">
<div id="content1">
<a href="inside_page.html">
<img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250">
</a>
</div>
<div id="content2"><img src="images/American_Goldfinch_250x200.jpg" alt="American Goldfinch" height="200" width="250"></div>
<div id="content3"><img src="images/blue-jay-Glamour_250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
<div id="content4"><img src="images/american-robin-250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
</div>
<div class="footer_menu">
<ul>
<li>Home</li>
<li>Birds In Danger</li>
<li>Birds Habitants</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="footer"> Footer area</div>
</div>
</body>
</html>
Is this what your looking for?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.menu a:link,
a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
.menu a:hover,
a:active {
background-color: red;
}
Just prefix the CSS for your anchor tags with the .menu class so it only targets your menu.
Demo here: http://jsfiddle.net/3vdh2dxL/1/
Also, I have changed your footer menu to use the same .menu class.
Related
I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.
I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.
For the #slider div, use display:inline-block:
#slider{display:inline-block}
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>
Hi how can i make element subtopics show and hide on click? i also want my subtopics hide when i clicked other menus or anywhere in web page thank you.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
$("#subTopics").toggle()
});
$("html").click(function (e) {
$("#subTopics").hide();
})
});
body
{
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#subTopics ul {
margin: 0;
padding: 0;
}
#subTopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
Html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header>
</header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subTopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Hi how can i make element subtopics show and hide on click? i also want my subtopics hide when i clicked other menus or anywhere in web page thank you.
Use toggle method to change from show to hide and vice versa.Also note the usage of preventDefault to prevent the default behavior of the anchor tag.
To hide the subTopics on clicking anywhere ,check for the visibility of the element then use the same toggle function.
Also note in this case the use of preventDefault along with stopPropagation
$(document).ready(function() {
$("#mainTopics").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#subTopics").toggle();
});
$('body').on('click', function() {
if ($("#subTopics").is(':visible')) {
$("#subTopics").toggle();
}
})
});
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#subTopics ul {
margin: 0;
padding: 0;
}
#subTopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subTopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
Also Alternativetly you can use jquery .hide() and .show() methods
Jquery hide Show
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/
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>