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>
Related
How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript? Because when I tested out my website on a touchscreen device I clicked on the dropdown menu (which worked fine), but when I tried to get rid of the dropdown menu I couldn't (unless I reloaded the page). I would like it to have it hover on desktop and not hover on touchscreens. Is that even possible? Here's my html and css text:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/
normalize.min.css">
<style>
#media (max-width: 640px) {
.main-navigation{
position: absolute;
top: 166px;
left: 173px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background: #6e151e;
border-radius: 5px;
}
ul li {
display: block;
position: relative;
float: left;
background: #6e151e;
border-radius: 5px;
width: 130px;
}
li ul {
display: none;
position: absolute;
top: 37px;
left: 0px; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
font-family: Helvetica;
font-size: 11px;
padding-top: 12px;
padding-bottom: 12px;
font-weight: 70000px;
border-radius: 5px;
text-align: center;
border-right: none;
}
ul li a:hover {
background: #054075;
transition: .4s ease;
}
li:hover > ul {
display: block;
position: absolute;
transition: .4s ease;
}
li:hover li {
float: none;
transition: .4s ease; }
li:hover a {
background: #6e151e;
transition: .4s ease;
}
li:hover li a:hover {
background: #054075;
transition: .4s ease;
}
#media (max-width: 640px) {
ul ul ul {
border-left: 1px solid #fff;
left: 130px;
top: 0px;
}
}
</style>
</head>
<body>
<ul class="main-navigation">
<li class="Menu">Menu
<ul>
<li>Section 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4</li>
</ul>
</li>
<li>Section 1
<ul>
<li>Subsection 1
</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4</li>
</ul>
</li>
<li>Section 3
<ul>
<li>Subsection 1
</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
<li>Subsection 4
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
like this? ... bootstrap...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Villa borghese</a>
</div>
<ul class="nav navbar-nav">
<li class="active">a</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">b<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>bo</li>
<li>ba</li>
<li>bb</li>
<li>bc</li>
<li>bd</li>
<li>be</li>
<li>bf</li>
</ul>
</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</ul>
</div>
</nav>
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>
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();
});
});
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 implemented a javascript menu onto my site
http://www.ogormanconstruction.co.uk/work
If you select 'Work' then 'Contact' the two sub menus overlap
Is there a way to ensure that only the submenu that is selected is displayed?
This is the javascript I am using
<script type="text/javascript">
$(document).ready(function(){
$('#menu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#services').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'});
});
</script>
<div id="menu" class="menu clearfix">
<div class="toggle">Work</div>
<div class="items">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact</div>
<div class="items">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="services" class="menu clearfix">
<div class="toggle">Services</div>
<div class="items">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div>
This is the CSS
#menu {
position: relative;
top: 435px;
left: -13px;
width: 60px;
height: 25px;
}
#menu2 {
position: relative;
top: 438px;
left: -14px;
width: 60px;
}
#services {
position: relative;
top: 470px;
left: -14px;
width: 60px;
}
.menu .items a:hover {
text-decoration: none;
}
.menu .items a {
font-size: 11px;
color: #ABA099;
text-decoration: none;
}
.menu .items {
left: 180px;
width: 250px !important;
}
.menu .items li {
width: 250px;
line-height: 19px;
font-size: 11px;
color: #ABA099;
height: 19px;
}
.menu .items li a:hover {
color: #4D4D4F;
}
.menu .toggle {
color: #ABA099;
font-weight: normal;
}
.menu .toggle-hover {
color: #4D4D4F;
}
Move all your LI styles to your A tag. Use display:block for your A-tag.