CSS - Dropdown Is Not Working

I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top.

Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7:

http://www.groundedgroup.com/clients/NWR/

Here's the respective CSS:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
}

#sidebar ul li ul {

}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Any ideas on how to make this work properly when used on the side?

Thanks in advance.

I made a drop down menu with css and I can't get it to work with IE6. Can anyone help?

You can view an example of what I have at the following url

mentalgameofmoney.co.uk/example.html

Here is the CSS
Code:

#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px; 
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}

Here is the HTML
Code:

<div  id="menu">
  <a href="#">
  <div id="spacer"></div></a>
   <a  href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a> 
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
  </div>

I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.
Code:

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line
I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages.

Hi,

I'm trying to solve a little CSS issue with, guess what!, IE6.

92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob

In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip.

Also the dropdowns don't work.

Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated.

Thanks,

Brian

hello,

i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work.

the nested unordered lists appear like so:

ITEM1
subitem1 subitem2 subitem3
ITEM2
subitem1 subitem2 subitem3

i wanted them to appear like so:

subitem1____subitem1
subitem2____subitem2
subitem3____subitem3
ITEM1_______ITEM 2

the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow...

i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code:

CSS:
Code:

#menu ul { 
position: relative;
margin: 8em 0 0 0;
float: left; 
background-color: #D60078;
list-style-type: none;
}

#menu li 	{ 
display: inline; 
padding: 0 2.5em 0 0;
position: relative; 
}

#menu li a:link, a:visited { 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li a:hover, a:active 	{ 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li ul { position: absolute; 
left: 0; top: 0; 
background-color: #FFF;
display: block; 
} 

HTML:
Code:

<ul id="menu">
<li><a href="">ITEM1</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

<li><a href="">ITEM2</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

</ul>

i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent).

thanks for any help!

Hi,

I've put together a drop down menu based on the suckerfish demo which can be seen at http://wetherbyrunners.mdwebspace.co.uk. However it doesn't seem to be working in Internet Explorer. I've tried changing the z-index to a higher value for the drop down, but it hasn't worked. Does anyone have any ideas of how it could be sorted out?

Thanks in advance,

Matthew Dingley

My second level menu items are not showing in IE, but show fine in firefox.

Code:

#menucontainer {
	width: 100%;
	clear: both;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding-left:0px;
	padding-top:35px;
	padding-bottom:15px; }

#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}

#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}

#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}

#menu a:hover {
color: #fff;
background: #000000;
}

/* ********* secondary links ************** */

#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}

#menu li li a:hover {
color: #FFF;
background: #292A2C;
}

#menu li:hover { z-index:1;}

#menu li {position: relative}

#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
} 

}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 
</style>
<![endif]-->

Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML.

Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds.
but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories.
2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top.
can someone help me plz?

here my code
Code:

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
  left: -999em;
}

#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
  left: auto;
}

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help.

CSS code
Code:

#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
	background-image:url(images/agency2.gif);
	border:0px;
	width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
	background-image: url(images/agencyup2.gif);
	border: 0px;
	width: 54px;
	
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
	background-image: url(images/services2.gif);
	border:0px;
	width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
	background-image: url(images/servicesup2.gif);
	border: 0px;
	width: 56px;
}

Java Code
Code:

window.onload = initAll;

function initAll() {
	var allLinks = document.getElementsByTagName("a");
	
	for (var i=0; i<allLinks.length; i++) {
		if (allLinks[i].className.indexOf("menuLink") > -1) {
			allLinks[i].onclick = function() {return false;}
			allLinks[i].onmouseover = toggleMenu;
		}
	}
}

function toggleMenu() {
	var startMenu = this.href.lastIndexOf("/")+1;
	var stopMenu = this.href.lastIndexOf(".");
	var thisMenuName = this.href.substring(startMenu,stopMenu);

	document.getElementById(thisMenuName).style.display = "block";

	this.parentNode.className = thisMenuName;
	this.parentNode.onmouseout = toggleDivOff;
	this.parentNode.onmouseover = toggleDivOn;	
}

function toggleDivOn() {
	document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
	document.getElementById(this.className).style.display = "none";
}

Html code
Code:

   <div id="nav">
        <ul>
          <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
       <ul>
            <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
            <li><a href="#.html">As You Like It</a></li>
            <li><a href="#.html">Love's Labour's Lost</a></li>
            <li><a href="#.html">The Comedy of Errors</a></li>
          </ul>
</nav>

Hi all, I have a dropdown menu that appears onmouseover and goes away onmouseout. The code works as it is posted here, works. What I was trying to do, was to move the style tag in the div with the id 'p_default_1', into a class in the CSS file. But when I remove the style tag from the div, and add the class (class="menu1"), the dropdown menu no longer gets displayed when i roll over it.

note to mods: sorry if this is in the wrong forum, I just don't know what the problem is with.

html Code:
Original - html Code <td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" OnMouseOut="hide_sub('p_default_1', this, 0);"> <a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br> <a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br> <div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" > <table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0"> <tr> <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);"> <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; "> <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td> </tr> <tr> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td> </tr> </tbody></table></div></td>

  

<td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" 
OnMouseOut="hide_sub('p_default_1', this, 0);">
<a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br>
<a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br>

<div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" >

<table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0">
<tr>

    <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);">
    <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; ">
    <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div>
    <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td>
</tr>
<tr>
    <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div>    </td>
</tr>
</tbody></table></div></td>

javascript Code:
Original - javascript Code function hide_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = 'none'; } } function show_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = ''; } }

  

 function hide_sub(name, cell, i) {


             var b = document.getElementById(name);


             if (b != null) {


                 b.style.display = 'none';   


             }


         }


         


         function show_sub(name, cell, i) {


             var b = document.getElementById(name);


             if (b != null) {


                 b.style.display = '';   


             }


         } 

css Code:
Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }

  

 .menu1{


     margin-left:0px;


     margin-top:0px;


     position:absolute;


     z-index:2;


     display:none;


 } 

Hi there,

I'm trying to integrate some SEO friendly dropdown menus into an existing website design.

The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels).

Is there a good reference I can use for positioning my divs properly?

Thanks

I am having problems getting a drop down menu to work in IE6. Using a little bit of javascript i finally got it to where the functionality is correct but the drop down menu appears behind the page content (in any browser). I have tried the z-index values and maybe I'm using them incorrectly but I cannot fix the problem. I kind of posted this problem before but was unable to give much detail. I was able to upload it though so I have link to both the CSS and the actual page. Any help would be greatly appreciated, or even if there is no fix, any help on drop downs in IE6 would be greatly appreciated.

Complete HTML: http://happyhomebuilders.net/test/test.html

Complete CSS: http://happyhomebuilders.net/test/css.html

Thanks a lot,
Brian

I'm editing a CSS drop down navigation that uses <ul> and <li>.

Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of.

Thanks for your help!


Code:

<div id="wrap">
		<ul id="navbar">
		<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
			<li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a>
			</li>
			<li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a>
				<ul>
				<li><a href="summit_09registration.cfm">Register</a></li><li>
				<a href="summit_09scholarship.cfm">Scholarships</a></li></ul>


			<li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a>
				<ul>
					<li><a href="summit_09awards.cfm">Leadership Awards</a></li><li>
					<a href="summit_09party.cfm">Anniversary Party</a></li><li>
					<a href="summit_09work.cfm">Work Project</a></li><li>
					<a href="summit_09dine.cfm">Dine Arounds</a></li><li>
					<a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li>
					<a href="summit_09networking.cfm">Networking</a></li></ul>
					</li>
			<li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

	<li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a>
				<ul>
					<li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li>
					<a href="summit_09travel.cfm">Travel</a></li><li>
					<a href="summit_09neworleans.cfm">New Orleans</a></li></ul>
			</li>



</ul></div>

Code:

<style type="text/css">

#navbar {
	margin: 0;
	padding: 0;
	height: 0;}
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding-bottom:0px;
	padding-left: 0px;
	padding-right:0px;
	padding-top:0px;
	border: 0px;
	color: #fff;
	font-family: helvetica;
	font-size: 8pt;
	font-style: bold;
	font-color: #ffffff;
	text-decoration: none;}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	background-image: url(../images/summit_nav_back.gif);}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-image: url(../images/summit_nav_back.gif);
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-image: url(../images/summit_nav_red.gif); }
</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>