I am working on the menu/navigation bar for my website, but when I added the code for the information sub menu it failed to work. When I tested it I can click info, and hover over it, but it won't display the sub menu at all.
HTML Code:
<!doctype html>
<!--Opening brackets-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<meta charset="utf-8">
<title>Staff List- Krian Society</title>
</head>
<body>
<!--Header-->
<div id="header">
<table class="header">
<tr>
<td class="left">
Text here
</td>
<td class="right">
<div id=social>
<img src="images/facebook.png" width="32" height="32" alt="Facebook"/>
<img src="images/steam.png" width="32" height="32" alt="Steam"/>
<img src="images/youtube.png" width="32" height="32" alt="Youtube"/>
</div>
</td>
</tr>
</table>
</div>
<!--Banner-->
<div id="banner">
<img src="images/banner.jpg" width="43%" alt="TKS Banner"/>
</div>
<!--Nav Bar-->
<div id="menu">
<hr />
<ul>
<li><a href=index.html>Home</a></li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<li>Live Map</li>
<li>Forums</li>
<li>Wiki</li>
</ul>
<hr />
</div>
<!--Footer-->
<div id="footerstar">
<img src="images/star.png" width="100px" height="100px" />
</div>
<div id="footerlegal">
© The Krian Society 2016 | All Rights Reserved.
</div>
<!--Closing brackets-->
</body>
</html>
CSS Code:
#charset "utf-8";
/*Misc CSS*/
Body {
margin: 0px;
background-color: #272727;
}
hr {
border-color: #7b8e19
}
#font-face {
font-family: optimusPrinceps;
src: url('fonts/OptimusPrinceps.ttf');
}
/*Header*/
#header {
background-color: #7b8e19;
color: #ffffff;
text-align: center;
padding: 5px;
}
#header table {
margin-left: 5%;
margin-right: 5%;
}
#social img{
margin-left: 0.5%;
margin-right: 0.5%;
}
table.header {
width: 90%;
}
td.left {
text-align: left;
padding-top: 1%;
}
td.right {
text-align: right;
}
/*Banner*/
#banner {
padding-top: 1%;
text-align: center;
}
/*Nav Bar*/
#menu {
width: 100%;
}
#menu ul {
text-align: center;
color: #ffffff;
font-size: 20px;
}
#menu ul li {
display: inline;
margin-left: 1.5%;
margin-right: 1.5%;
font-family: optimusPrinceps
}
#menu ul li a{
text-decoration: none;
color: #ffffff;
}
/*Footer*/
#footerstar {
width: 100%;
background-color:#7b8e19;
text-align: center;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
#footerlegal {
width: 100%;
text-align: center;
background-color:#171717;
color: #FFFFFF;
padding-bottom: 5px;
padding-top: 5px;
font-family: optimusPrinceps
}
/* sub menu */
#menu li:hover .sub-menu {
/*z-index:1;*/
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
Please try this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Simple Drop Down Menu</title>
</head>
<body>
<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.drop_menu {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
padding:9px 20px;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
You have to keep the sub menu within the li tags. Your code should be:
<li>Info
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
Use the following code to display the submenu::
CSS: Just replace your .sub-menu class by
.sub-menu {
padding: 10px;
position: absolute;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #2e2728;
display: none;
left: 46%;
}
HTML: Move your full submenu ul within the "info" li and set class "info" to that li
<li class="info">Info
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
Jquery: Use the following jquery to display the submenu on hover "Info" link
<script type="text/javascript">
$('.info').mouseover(function(){
$('.sub-menu').show();
});
$('.info').mouseout(function(){
$('.sub-menu').hide();
});
</script>
I wrote code for you to solve this bug
Here is your codes . NO 1 is html part and NO 2 is css part
<!doctype html><!--Opening brackets--><html><head><link rel="stylesheet" type="text/css" href="home.css"><meta charset="utf-8"><title>Staff List- Krian Society</title></head><body><!--Header--><div id="header"><table class="header"><tr><td class="left">Text here</td><td class="right"><div id=social><img src="images/facebook.png" width="32" height="32" alt="Facebook"/><img src="images/steam.png" width="32" height="32" alt="Steam"/><img src="images/youtube.png" width="32" height="32" alt="Youtube"/></div></td></tr></table></div><!--Banner--><div id="banner"><img src="images/banner.jpg" width="43%" alt="TKS Banner"/></div><!--Nav Bar--><div id="menu"><hr /><ul><li>Donate</li><li>Vote</li><li class="sub-menu-hover">Info<ul class="sub-menu"><li>Test 1</li><li>Test 2</li><li>Test 3</li><li>Test 4</li></ul></li><li>Live Map</li><li>Forums</li><li>Wiki</li></ul><hr /></div<!--Footer--><div id="footerstar"><img src="images/star.png" width="100px" height="100px" /></div><div id="footerlegal">© The Krian Society 2016 | All Rights Reserved.</div><!--Closing brackets--></body></html>
#charset "utf-8";/*Misc CSS*/body {margin: 0px;background-color: #272727;}hr {border-color: #7b8e19}#font-face {font-family: optimusPrinceps;src: url('fonts/OptimusPrinceps.ttf');}/*Header*/#header {background-color: #7b8e19;color: #ffffff;text-align: center;padding: 5px;}#header table {margin-left: 5%;margin-right: 5%;}#social img{margin-left:0.5%;margin-right: 0.5%;}table.header {width: 90%;}td.left {text-align: left;padding-top: 1%;}td.right {text-align: right;}/*Banner*/#banner {padding-top: 1%;text-align: center;}/*Nav Bar*/#menu {width: 100%;}#menu ul {text-align: center;color: #ffffff;font-size: 20px;}#menu ul li {display: inline; margin-left: 1.5%;margin-right: 1.5%;font-family:optimusPrinceps;}#menu ul li a{text-decoration: none;color:#ffffff;}/*Footer*/#footerstar {width: 100%;background-color:#7b8e19;text-align:center;font-weight: bold;padding-top:10px;padding-bottom: 10px;}#footerlegal {width: 100%;text-align: center;background-color:#171717;color: #FFFFFF;padding-bottom: 5px;padding-top: 5px;font-family: optimusPrinceps}/* sub menu */#menu li:hover .sub-menu {/*z-index:1;*/opacity:1;}.sub-menu{width:20%;background:#2e2728;display:none;position:absolute;float:left;top:140px;left:420px;}.sub-menu li {display:block;font-size:16px;}.sub-menu li a {padding:10px 30px;display:block;}.sub-menu-hover{background:#808080;}.sub-menu{background:#808080;}.sub-menu-hover:hover.sub-menu{color:#F00;display:block;opacity:9;}.sub-menu li a:hover, .sub-menu.current-item a {background:#3e3436;}
Related
I am building a website for a non-profit company an d I need a dropdown menu in it.
I found this tut on youtube
"https://www.youtube.com/watch?v=wHFflWvii3M"
As far as I can see Iḿ doing everything just as is is supposed to be done. But somehow the menu will not react as in dropdown.
What is going wrong?
Here is a copy of my html
<!DOCTYPE html>
<html>
<head>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a></li>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</body>
</html>
And here of my css code//
*
{
padding: 0;
margin: 0;
}
body
{
background-image: url(deKlomp.jpg);
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar
{
background: rgb(0,100,0);
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color:#fff
}
.menu-bar ul li
{
widows: 120px;
margin: 15px;
padding: 12px;
}
.menu-bar ul li a
{
text-decoration: none;
color:#fff;
}
.active, .menu-bar ul li:hover
{
background: #2bab0b;
border-radius:3px;
}
.menu-bar .fa
{
margin-right: 8px;
}
.sub-menu-1
{
display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
display: block;
position: absolute;
background: rgb(0,100,0);
margin-top: 15px;
margin-left: -15px;
}
Your code its not exactly same like on this video tutorial ;)
First: you have /body twice
Second: "li" closing should be after you sub-menu div, not after
<li class="active"><a href="#">Home<a>
All here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
</li>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/watch.png");
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar{
background: #005400;
width:100%;
padding:20px;
}
.menu-bar > ul{
width:85%;
margin:auto;
display: flex;
justify-content:space-around;
}
.menu-bar ul li{
list-style: none;
}
.menu-bar > ul > li a{
padding: 10px 20px 10px 20px;
color:#ffffff;
text-decoration:none;
}
.sub_menu{
display:none;
}
.menu-bar ul li ul.sub_menu li{
padding:20px;
width:100px;
}
.menu-bar ul li:hover > ul.sub_menu{
display: block;
position:absolute;
background:#005400;
margin-top:20px;
}
.menu-bar ul li a:hover{
background:#2BAB0B;
padding: 10px 20px 10px 20px;
border-radius:5px;
}
<div class="menu-bar">
<ul>
<li class="active">Home
<ul class="sub_menu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>News
<ul class="sub_menu">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<link type="text/javascript" href="js/bootstrap.js">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
#media screen and (max-width: 600px) {
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
li ul {display: none;}
ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff; width: 100%}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
li:hover li {float: none; }
li:hover a {background: #0026ff;}
li:hover li a:hover {background: #4800ff;}
#drop-nav li ul li {border-top: 0px;}
#s{float: left;position: relative;width: 100%}
}
</style>
</head>
<body>
<div style="float: left" id="s">
<ul id="drop-nav">
<li>Content Management1<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div style="float: right" id="s"> <ul id="drop-nav">
<li>Content Management2<span class="glyphicon glyphicon-plus"></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<div style="float: right;position: relative" id="s"> <ul id="drop-nav">
<li>Content Management3<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<br><br><br><br>
</div>
</body>
</html>
I want this list to be converted into dropdown menu and on click on it, I tried this logic and searched bootstrap classes didn't find any. I want it work like navigation bar of bootstrap as it gets converted to dropdown menu when screen resolution is low and work onclick.
first of all read Difference between id and class might be your code was not working because of it. i just use bootstrap collapse in your code its working fine for me i just change id with classes and some css you can compare your code with it.
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #fff;
width: 100%
}
li ul {
display: none;
width: 100%;
z-index: 1
}
ul li a {
display: block;
background: #808080;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
width: 100%
}
ul li a:hover {
background: #f00;
}
li:hover li {
float: none;
}
li:hover a {
background: #0026ff;
}
li:hover li a:hover {
background: #4800ff;
}
.drop-nav li ul li {
border-top: 0px;
}
.s {
position: relative;
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test1" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
<ul id="test2" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test3" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<br>
<br>
This is a double part fragment of dropdown menu with double part the issue is that I cannot make the two div be aside each other unless I use the div width to any ration.
the CSS code what I want is a method to display the two div below aside each other without using the width property in the html code.
.navbar ul li a{
text-decoration: none;
color: black;
padding: 16.2px;
display: block;
}
.navbar{
width: 100%;
height: 50px;
position: relative;
margin: 0;
padding: 0;
background-color: #c7ffff;
border:1px solid black;
}
.dropnavbar{
position: absolute;
margin: 0;
padding: 0;
height: 60px;/*can be negliacted if the default is auto*/
}
.active{
float: left;
text-align: center;
list-style: none;
width: 100px;
font-size: 15px;
}
.subnavbar{
display:none;
padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
margin: 0;
}
.navbar li:hover .subnavbar{
display: block;
}
.navbar li:hover li,.navbar li:hover{
background-color:#e0ffff;
}
.subnavbar>li>a:hover{
background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
border-top: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link href="navbar.css" rel="stylesheet">
<title>DropDown NavBar Trial 3</title>
</head>
<body>
<header>
<div class="navbar">
<ul class="dropnavbar">
<li class="active">About
</li>
<li class="active">Branches
<ul class="subnavbar">
<li class="active">Egypt
</li>
<li class="active">USA
</li>
<li class="active">UAE
</li>
<li class="active">France
</li>
</ul>
</li>
<li class="active">Categories
<div style="width:auto;">
<div style="float:left; width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
<div style="float:right;width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
</div>
</li>
<li class="active">Paying
</li>
</ul>
</div>
</header>
</body>
</html>
I hope this example will help you out!!!!
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
<ul id="nav">
<li>Link1</li>
<li>Link2
<ul>
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Link3</li>
</ul>
The following coding gives an output of a list in a vertical manner. How do I adjust this to make it in horizantal list? For example like this: http://www.nol.com.sg/wps/portal/nol
<body>
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History</li>
<li>News</li>
</ul>
<li><a class="menu" href="">Contact Us</a></li>
</ul>
</body>
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
display:none;
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
In css use the following code:
#mainmenu li{
display:inline;
}
http://css.maxdesign.com.au/listutorial/horizontal_master.htm
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
To affect this only on li that are childs of #mainmenu
#mainmenu > li {
float:left
}
DEMO
HTML
<ul id="mainmenu">
<li><a class="menu" href="">Menu</a>
<ul>
<li>Home
</li>
<li>About
</li>
</ul>
</li>
<li><a class="menu" href="">Company</a>
<ul>
<li>History
</li>
<li>News
</li>
</ul>
<li><a class="menu" href="">Contact Us</a>
</li></li>
</ul>
CSS
#mainmenu li {
float:left;
list-style-type:none;
margin-right:1px;
width:80px;
text-align:center;
}
#mainmenu li li {
float:none;
padding:0;
}
#mainmenu li ul {
padding:0;
}
#mainmenu li:hover ul {
display: block;
}
I have to code the button below when its clicked it will display a dropdown menu.
How would I approach this as I have never come across this before.
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
}
body {
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}
.wrapper {
position:relative; height:25px;
}
.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
-->
</style>
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list">
<a class="category" href="#Home">Home</a>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#about">About Us »</a>
<ul class="submenu">
<li>About link 1</li>
<li>About link 2</li>
<li>About link 3</li>
<li>About link 4</li>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles »</a>
<ul class="submenu">
<li>Articles link 1</li>
<li>Articles link 2</li>
<li>Articles link 3</li>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News »</a>
<ul class="submenu">
<li>News link 1</li>
<li>News link 2</li>
<li><a class="endlist" href="#news3">News link 3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#donate">Donate</a>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#contact">Contact</a>
</li>
</ul>
<!-- end mainmenu --></div>
<!-- end wrapper --></div>
or try this link
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
or
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
I agree with Jerome C.
The only seggestion I can give you, is that usually there are many sites whose title is "the best NNN dropdownmenus" or substitute dropdownmenus with whatever.
Thery are usually helpful.
In such case:
http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/