Hi i have been trying to do a slide show using HTML and jquery. I tried to figure out why it it not working but could not find out why? That is the reason ia m writing here. I am also trying to get navigation left and right arrows.
thank you for any help.
<!DOCTYPE html>
<html>
<head>
<title>Roohi Health Screnning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="roohiSTYLE.css">
<!--------- SCRIPT FOR SLIDER--------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
<!-- Content Starts Here -->
<header>
<h1> Welcome to Roohi</h1>
</header>
<!-- Navigation bar-->
<nav id="navigation">
<ul>
<li>Home</li>
<li>Products
<ul>
<li>Waterless Shampoo</li>
<li>Alcohol-Free Soap</li>
<li>Needle</li>
</ul>
</li>
<li>About Us</li>
<li>Service
<ul>
<li>BloodPresure</li>
<li>Test2</li>
<li>test3</li>
</ul>
</li>
<li>FindUs</li>
</ul>
</nav>
<div class="logo">
</div>
<div id="slides">
<ul>
<li><img src="images/green-stripes.jpg"/></li>
<li><img src="images/blue-stripes.jpg"/></li>
<li><img src="images/pink-stripes.jpg"/></li>
</ul>
</div>
<!-- Content Ends Here -->
</section>
<footer>
</footer>
</div>
</body>
</html>
css
#navigation{
font-family: crusoe;
color:#99;
margin: -0px auto;
position: realtive;}
#navigation ul{
list-style-type: none; /*removes bullet points*/
min-width:200px;}
#navigation ul li {
display:inline-block;}
#navigation ul li :hover{
background-color: #333}
#navigation ul li a, visited {
padding:20px;
display:inline-block;
text-decoration:none;
color:#999;}
#navigation ul li:hover ul{
display:block;
}
#navigation ul ul {
display: none;
position:absolute;}
#navigation ul ul li{
display: block;}
#navigation ul ul li a:hover {
display:block;
position: relative;
}
#navigation li:nth-child(3) {
padding-right: 80px;}
#navigation li:nth-child(4) {
padding-left: 80px;}
.logo {
background: url(images/Roohi-logo1.png) 50% 0 no-repeat;
background-size: 100px 90px;
width: 100px;
height: 90px;
position: absolute;
top: 30px;
left: 360px;
}
footer
{
display: table-row;
height: 1px;
background-color: blue;
}
Have a close look at their example on http://www.slidesjs.com/ . Pay close attention to their sample markup for the images. They are images inside a div, not images inside li's inside a ul inside a div as you have.
Also, you pasted a bunch of CSS in your question, assuming they are in a proper style block in your real site?
As for the arrow links, they provide you previous and next links which you can style to look like arrows.
Related
I trying to do something which I think will be simple but I can't seem to get anywhere. I have a small navigation bar with a couple of links then an area of text. What I want to happen is when I click on a click the paragraph of text will change to the link it relates to.
I have tried the following among many things (forgive me I haven't used JQuery or javascript in quite a while) It doesn't appear to do anything whatsoever!
I am open to looking at new ways of achieving the desired effect.
var ptext;
$(document).ready(function(){
ptext = $("#pchange");
$(".one").click(function(){
ptext.html("text1");
});
$(".two").click(function(){
ptext.html("tex2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="#">EMEAR</a></li>
<li><a class="two" href="#">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
you can either remove the href from the a tag or add event.preventDefault() so that the link is no longer working like it should.
also if you only want to change the text content of an element use .text()and not .html()
var ptext;
$(document).ready(function() {
ptext = $("#pchange");
$(".one").click(function(event) {
event.preventDefault();
ptext.text("text1");
});
$(".two").click(function(event) {
event.preventDefault();
ptext.html("tex2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px;
/* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
/* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="#">EMEAR</a></li>
<li><a class="two" href="#">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
can you add the href="javascript:void(0)" or event.preventDefault() or event.preventDefault(); event.stopPropagation(); you can choose any one.
your script changes the HTML but its work .html() or .text() but .text() is the best beacuse text is mean the inner text html means the others element.
first, you click the nav ul li a button and just get this text and change your target element text.
Work fine...
Thank you
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var ptext;
$(document).ready(function(){
ptext = $("#pchange");
$("nav ul li a").click(function(event){
ptext.html($(this).text());
});
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="javascript:void(0)">EMEAR</a></li>
<li><a class="two" href="javascript:void(0)">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.
I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:
<ul id="menu" class="menu">
<li>Home</li>
<li id="menu1" class="menu-link">LINK1</li>
<li id="menu2" class="menu-link">LINK2</li>
<li id="menu3" class="menu-link">LINK3</li>
<li id="menu4" class="menu-link">LINK4</li>
</ul>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
and here is my CSS, the idea is to position the description just above its corresponding element btw:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
and finally here is the jquery:
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});
WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID
var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
/* "this" is element being hovered*/
var index= $links.index(this);
$content.stop().hide().eq(index).fadeIn();
},function(){
/* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})
DEMO
I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:
HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}
Let me know if you need any explanations and I'll edit my answer.
I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
You can use a div element and float it left with CSS.
HTML:
<div id="nav">
<ul>
<li>A Link</li>
<li>Another Link</li>
</ul>
</div>
<div id="content">
<p> Here's some stuff </p>
</div>
CSS:
#nav {
width: 20%;
float: left;
background-color: gray;
}
#content {
width: 80%;
}
I would also run through the HTML and CSS tutorials at HTML Dog. It will make your life so much easier.
Listamatic has various examples of how to style a list of links
HTML :
<!Doctype html>
<html projectReviver="leftmenu.html">
<head>
<title>My Left Menu</title>
<link rel="StyleSheet" href="design.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div id="main">
<ul>
<li>First page</li>
<li>2<sup>nd</sup>page</li>
</ul>
</div>
</nav>
</body>
</html>
design.css :
#mainu ul {
list-style: none;
background-color: red;
}
#nav {
width: 20%;
float: left;
background-color: red;
}
#content {
list-style: none;
}
alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.png
Hello, whenever we go to Google Page and click on the "more", a menu will be dropped down. I would like to have the following effect on my web site too. May I know which JavaScript library can help me to achieve the similar effect?
Google released their closure libray, I think the menu in your question is the following
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
hope it helps
Cheers
Similar menus, very well documented and flexible. Only Denis' answer -- using the actual closure library -- is better, but I doubt it's as well documented.
Any JavaScript library can help you in such situations.
You may want to check out the following example, which I hope can get you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
More Item 1
More Item 2
More Item 3
More Item 4
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
Screenshot from the above example:
Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png
You just add listener to click event for a "more" element:
elementRef.addEventListener("click", function() {
// listener code here
}, false);
(you can do this in any JS library if you want to). This listener should now just display (change CSS property display from none to block) another element (ie. <div id="more" />). Also you add another listener for click event, but this time for the body element (to hide menu).
Final code could looks like following:
JavaScript:
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML:
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS:
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}
alt text http://sites.google.com/site/yanchengcheok/Home/google-copy-cat.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC #3366CC #A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li>Home</li>
<li> · </li>
<li>Main Menu1</li>
<li> · </li>
<li>Main Menu2</li>
<li> · </li>
<li>Main Menu3</li>
<li> · </li>
<li>Main Menu4</li>
<li> · </li>
<li><u>Help</u><small>▼</small>
<ul>
<li>Install</li>
<li><div class="jsddm-seperator"></div></li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</body>
a few weeks back I had stumbled across a blog post on creating google like menu
may be that could help you :
http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/
It uses jQuery but the images you have posted looks like the old google menu since the new menu is black and even this blog post is on the same new menu but it also includes the dropdown menu, so I think this might help you.
Update
Here is a blog post on creating the old menu as well, you can also check this out, but this does not have the dropdown feature which you are asking for, may be the former one is better.