CSS - Pure Css Drop Down Menus

I am very new to this whole css thing, but am trying to get all learned about it. I think I am doing badly so far.

I am trying to make css drop-down menus, and have pulled code from all over the place, and modified it to look correct (so as to match my design comp). it is based on the suckerfish model <http://www.alistapart.com/articles/dropdowns/> and it works exactly as it should in safari, firefox (mac & pc). but doesn't work correctly at all in IE (mac or pc). I have implemented the "ie fix" with the javascript code several sites instructed me to use, and while it now sorta works (in the sense that the menus drop down), there are still problems. such as in IE on pc you can't roll down to the drop down menus, because they go away as soon as you roll off the top menu item.

in IE on mac they are messed up in a whole other way. you can roll down to them, and they don't go away as soon as you're off the top nav option, but the hover is all jacked, and the menu is broken, sending the last nav button down to the next line! aaahhh!

can anyone help me?! I'm sorry I'm so stupid and helpless, but... well. I am.

any tips/etc would be mighty appreciated!

-daniel

Hi All,

I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer.

I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns

My CSS file is here

And a sample page can be found here

Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack.

@kravvitz

You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply...

OK, so I think I'm smart, but I guess not. I have this site http://jwdev.ocis.net I have been working on. It has implemented a CSS only drop down menu system.

The problem. No mater what I do, including clear: left/z-index - the drop down menu "PROJECTS" falls under the page content in Firefox.

For a first, this works in IE flawlessly.

The CSS is a disaster right now as I have been hammering at it for days. Anyone lend a hand?

Hi all,

Anyone know of any problems with CSS drop down menus a la suckerfish (www.alistapart.com) and Konqueror?

Here's my CSS for this http://www.nzwebz.com/wikindx2 :

Code:

body {
	background	:	url("paper.jpg");
	font-family	:	sans-serif;
}
ul {
	padding		:	0;
	margin		:	0;
	list-style	:	none;
}
li {
	float		:	left;
	position	:	relative;
}
li ul {
	display		:	none;
	position	:	absolute; 
	top		:	1.1em;
	left		:	0;
	border		:	4px #CCCC99 groove;
	background	:	#ffcc99;
	width		:	7em;
}
li > ul {
	top		:	auto;
	left		:	auto;
	}
li:hover ul, li.over ul{
	display		:	block;
	}

A:visited, A:link, A:active {
	text-decoration	:	none;
	color		:	#666666;
	background	:	transparent;
	display		:	block;
	width		:	7em;
}
A:hover {
	text-decoration	:	none;
	background	:	#ff9900;
	color		:	white;
	display 	:	block;
	width		:	7em;
}
.clear {
	clear		:	both;
}
.titleTable {
	width		:	90%;
}
.menuTable {
	margin		:	0 0 0 5%;
}
.menuli {
	color		:	#ff9900;
}
.mainTable {
	border		:	#ff9900 3px groove;
	width		:	90%;
}
h1, h2, h3, h4	{
	color		:	#ff9900;
}

With the javascript (which needs work I know), it works with IE (with javascript fix), Netscape, Firefox and Mozilla but the drop downs won't work with Konqueror. Javascript is turned on in Konqueror in case it's anything to do with that.

I notice that even the suckerfish pretty example doesn't work in Konqueror (v3.1-12)

Thanks.

I have added drop-down menus, but they are not appearing directly underneath the originating links. They are WAY off to the right. I can't figure out why for the life of me. Help, please?

http://www.bartlett-family.net/BBCON

Chris

Hi all,

I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance.

P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice.

The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.)

URL: http://rady.ucsd.edu/index-dev.html

Relevant HTML:

Code:

<ul id="nav-main" class="home">
			<li id="mba"><a href="/mba/">MBA Programs</a>
				<ul>
					<li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li>
					<li><a href="/mba/flex/">FlexMBA</a></li>
					<li><a href="/mba/admissions/">Admissions</a></li>
					<li><a href="/mba/careers/">MBA Career Connections</a></li>
					<li><a href="/mba/profiles/">Student & Alumni Profiles</a></li>
					<li><a href="/mba/organizations/">Student Organizations</a></li>
					<li><a href="/mba/seminars/">Professional Seminars</a></li>
					<li><a href="/mba/mentors/">Executive Mentors</a></li>
					<li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li>
				</ul>
			</li>
			<li id="faculty"><a href="/faculty/">Faculty & Research</a>
				<ul>
					<li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li>
					<li><a href="/faculty/research/">Research Areas</a></li>
					<li><a href="/faculty/seminars/">Research Seminars</a></li>
					<li><a href="/faculty/recruiting/">Faculty Recruiting</a></li>
					<li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li>
				</ul>
			</li>
			<li id="exec"><a href="/exec/">Executive Development</a>
				<ul>
					<li class="first-item"><a href="/exec/custom/">Custom Programs</a></li>
					<li><a href="/exec/open/">Open Enrollment Programs</a></li>
					<li><a href="/exec/learn/">Learning Consortium</a></li>
					<li><a href="/exec/leadership/">Leadership Assessment</a></li>
					<li><a href="/exec/align/">Align Executive Series</a></li>
					<li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li>
				</ul>
			</li>
			<li id="corporate"><a href="/corporate/">Corporate Connections</a></li>
			<li id="news"><a href="/news/">News & Events</a>
				<ul>
					<li class="first-item"><a href="/news/releases/">News Releases</a></li>
					<li><a href="/news/media-coverage/">Media Coverage</a></li>
					<li><a href="/news/faculty-experts/">Faculty Experts</a></li>
					<li class="last-item"><a href="/news/newsletter/">Newsletter</a></li>
				</ul>
			</li>
			<li id="invest"><a href="/invest/">Invest in Rady</a>
				<ul>
					<li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li>
					<li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li>
					<li><a href="/invest/fellowships/">Endowed Fellowships</a></li>
					<li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li>
				</ul>
			</li>
			<li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li>
			<li id="undergrad"><a href="/undergrad/">Undergraduate</a>
				<ul>
					<li class="first-item"><a href="/undergrad/courses/">Courses</a></li>
					<li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li>
				</ul>
			</li>
			<li id="about"><a href="/about/">About</a>
				<ul>
					<li class="first-item"><a href="/about/welcome/">Welcome</a></li>
					<li><a href="/about/staff/">Our Staff</a></li>
					<li><a href="/about/campus/">Our Campus</a></li>
					<li><a href="/about/sandiego/">Life in San Diego</a></li>
					<li><a href="/about/dean/">About the Dean</a></li>
					<li><a href="/about/athena/">Athena</a></li>
					<li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li>
				</ul>
			</li>
		</ul>

Relevant CSS:

Code:

	#nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
	#nav-main.home { padding-bottom: 0; }
	
		#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
		
		#nav-main li ul { position: absolute; list-style: none; }
		
		#nav-main li ul li { display: none; text-indent: 0px; }
		
		#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }

		#nav-main li:hover ul li { display: block; }
		
		#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
		
		#nav-main li ul li.first-item a { padding-top: 10px; }
		#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
		
		#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
	
		#mba ul li a, #mba ul li a:hover { width: 155px; }
		#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
		#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
		#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
		#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
		#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
		#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
		#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
	
		#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }

		#mba a { width: 105px; }
		#mba a:hover, #mba.current a { background-position: 0px -34px; }
		#faculty a { width: 127px; background-position: -105px 0; }
		#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
		#exec a { width: 152px; background-position: -232px 0; }
		#exec a:hover, #exec.current a { background-position: -232px -34px; }
		#corporate a { width: 150px; background-position: -384px 0; }
		#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
		#news a { width: 107px; background-position: -534px 0; }
		#news a:hover, #news.current a { background-position: -534px -34px; }
		#invest a { width: 59px; background-position: -641px 0; }
		#invest a:hover, #invest.current a { background-position: -641px -34px; }
		#alumni a { width: 64px; background-position: -700px 0; }
		#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
		#undergrad a { width: 82px; background-position: -764px 0; }
		#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
		#about a { width: 57px; background-position: -846px 0; }
		#about a:hover, #about.current a {background-position: -846px -34px; }

Hi

I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla.

The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help?

Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work!

Is there a better way to do this?

Thanks

Hello All,

I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial

As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php.

Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other)

This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck.

Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line

Here's the html code:
Code:

<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>

<div id="newscontent">

<table width="100%" border="0">
    <tbody>
        <tr>
            <td>
            <form method="post" action="mailto:spicelmf@gmail.com">
                <b>Test:<b> <br />
                <input type="text" size="71" name="title" /><br />

                <br />
                <input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
            </form>
            </td>
        </tr>
    </tbody>
</table></div>
</div>

and here's the css:
Code:

#nav {

        position: relative;

        margin: 0 auto 0 auto;

        top: 67px;

        width: 720px;
        
        left: 50px;

        padding: 0;
        
        height: 400px;
        
        /*list-style-type: none;*/

}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;
        min-width: 150px;

}
li ul {
	position: absolute;
	top: 35px;
	display: none;
}
ul li a {
	display: block;
        text-align: center;
	text-decoration: none;
	line-height: 24px;
        font-size: 14px;
        color: #21448c;
	padding: 5px;
	background: #e6e3b8;
	margin: 0 2px;
        border-style: solid;
        border-width: 0 1px 1px 1px;
        border-color: #21448c;
}

ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }



#content {

  position: relative;
  height: 500px;
  margin: 0 auto 0 auto;
  width: 720px;
  top: 56px;
  padding: 0;      
  font-family: Arial,Helvetica,sans-serif;


}



#newscontent {

  position: absolute;
  margin: 0 auto 0 auto;
  min-height: 380px;
  top: 135px;
  padding: 0px 54px 20px 50px;
  width: 620px; 
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10pt !important;
  z-index: -1;
  background: transparent url(maincontent_bg.png) repeat-y left top;
 
}

Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for.

I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left...

Code:

#dmenu 
{
  /* font-family: Arial, Helvetica, Sans-Serif; */
  /* font-size: 12px; */
}
#dmenu li ul 
{ 
  /* top: auto; */
  /* left: auto; */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}
.xMenuUl
{
  text-align: center;  /* for IE stupidity */
  background-color: #FFFFFF;
  list-style-type: none;  /* hide the bullet icon */
  margin: 0;
  padding: 0;
}
.xMenuLi
{
  list-style-type: none;  /* hide the bullet icon */
  float: left;
}
.xMenuTitle
{
  display: block;
  width: 100px;
  text-indent: 0px;
  text-decoration: none;
  border: 1px solid #000000;
  padding: 4px;
  line-height: 14px;
}
.xSubmenuUl
{
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
  margin-top: -1px;
  background-color: #E7F7FF;
  background-position: top left;
  background-repeat: repeat-x;
  border-top: 1px solid #000000;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
  padding: 3px;
  text-decoration: none;
  color: #000000;
  display: block;
  width: 250px;
}
.xSubmenuLi a:hover
{
  text-decoration: none;
  background: #336699;
  color: #FFFFFF;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
 </head>
<body>

This is a test...<br>sdfsdf<br>
<ul class="xMenuUl" id="dmenu">
 <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
   <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
   <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
   <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
   <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
   <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
   <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
   <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
   <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
  </ul>
 </li>
</ul>
this is a test....<br>
asdf<br>

</body>
</html>

Hi All,

When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC.

When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home."

The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide.

Any idea why these issues are occurring?

Thanks.

--------This Part Solved!---------

Hi Guys!

I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin.
Here is the page:
http://www.whitecapgraphics.com/bates/front.php
If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div.
PS - The Home button does not have a drop down menu.

My CSS:
Code:

#d1 {
	background-color: #003366;
	float: left;
	width: 200px;
	background-image: url(images/header_bg.gif);
	background-repeat: repeat-x;
	height: 107px;
}
#d2 {
	background-color: #1F2935;
	float: right;
	width: 477px;
	background-image: url(images/header_bg.gif);
}
#head_container {
	background-color: #000066;
	float: left;
	background-image: url(images/header_bg.gif);
	height: 107px;
}
#nav_container {
	background-color: #1F2935;
	float: left;
	width: 100%;
	background-image: url(images/nav_bar_bg.gif);
	height: 30px;
}
#page_container {
	margin: auto;
	width: 99.99%;
	height: 100%;
}
#content_container {
	background-color: #e4e4e4;
	float: left;
	width: 100%;
	background-image: url(images/content_blue_column_bg.gif);
	background-repeat: repeat-y;
	background-position: right;

}
#content {
	background-color: #e4e4e4;
	position: relative;
	margin-right:253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
}
#right_column {
	background-color: #CC9900;
	float: right;
	width: 253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}












/*____________________________________________________________*/


* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */

/* the horizontal menu starts here */
div#nav {
	width:600px; /* sizes the nav div at a fixed width */
	float:left;
	background-color:#CCF; /* colors the div */
	background-image: url(images/nav_bar_bg.gif);
	z-index:10;
	}
div#nav li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	border:1px solid black; /* creates dividing lines between the li elements */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-weight: bold;
	min-width: 126px;
	text-align:center;
	height:26px;
	}
div#nav li:first-child {
	border-left:1px solid; /*the first vertial line on the menu */
	}

div#nav li:hover { 
	background-color:#D1C9B9; /*sets the background of the menu items */
	}
div#nav a {
	display:block;
	padding:1px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#D1C9B9;	/* sets the type color */
	}
div#nav a:hover {
	color:black;
	}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
	margin:0; 
	z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	top:28px;
	}
#pyt ul li {
	background-color:#B3916B;
}
#h ul li {
	background-color:#1F2935;
}
#ri ul li{
	background-color: #827977;
}
#bn ul li{
	background-color: #455D67;
}


div#nav ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid; /*  three sides of each drop-down item */
	border-bottom:1px solid;
	border-right:1px solid;
}
div#nav ul li ul li a {
	padding:1px .5em;
	font-size:small;
	text-align:left;
	vertical-align:middle;}
div#nav ul li ul li:first-child {
	border-top:1px solid; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}


/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#nav ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
	@media all and (min-width: 0px){
   body div#nav ul li ul {padding-bottom:22px;}
   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */




#h {
	background-color: #1F2935;
}
#ri {
	background-color: #827977;
	letter-spacing: -.06em;
}

body {
	background-color: #1F2935;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#pyt {
	background-color: #B3916B;
}
#bn {
	background-color: #455D67;
	}

#content #flash_map {
	text-align: center;
	border: 2px solid black;
	width: 660px;
	margin: auto;
}

--------****Still Need Help Here!-----------

Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated:

****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>?

2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED*

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?

This is nice, but the css in too messy.

http://www.bluescopesteel.com

If you have any betterones please tell me.

Cheers

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?