CSS drop-downs not working like they should

**amidude** · Sep 20, 2006 07:58

Okay, here's the code...this is my first stab at a CSS-Driven drop down and it's almost there...but not quite. The top two links in the dropdown work, though they aren't formatted the way I want, but the two lower ones disappear when you get to them.

Here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style>
	body {
			behavior:url(csshover.htc);
			background: #004a2b;
			text-align:center;
			font: 11px, Verdana;
			margin: 5px;			
		}
		
		* { 
			margin: 0px;
			padding: 0px;
		}
		
		h1 {
			font: bold 18px Arial;
			color: #004a2b;
			padding: .5em;
		}
		
		p {
			padding: 5px;
		}
		
		#mainContainer {
			margin: 0 auto;
			padding: 5px;
			width:99%;
			background: #fff;
			text-align:left;
		}
		
		.topLog { 
			text-align:right;
			white-space:nowrap;
			padding: 0 0 3px 0;
		}
		
		.topLog span {
			float:left;
			width:5em;
			text-align:left;
			
		}
		
		#header {
			background: #e8e8c8;
			text-align: right;
		}
		
		#header span {
			float: left;
		}
		
/************** Navigation ********************/
		div#nav {
			background: url(imgs/backgrdNav.gif);
			height: 2.6em;
			width: 100%;
			vertical-align:center;
		}
		
		div#nav ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		div#nav li {
			position:relative;
			float: left;			
		}
		
		 div#nav li a {
		 	display: block;
			height: 2.6em;
			line-height: 2.6em;
			float: left;
			width: 12em;			
			color: #fff;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		}
		
		div#nav li a:hover {
			display: block;
			background: url(imgs/backgrdNav_orange.gif);
			height: 2.6em;
			line-height: 2.6em;
			float: left;
			width: 12em;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		}
		
		/* the drop-down starts here */
		div#nav ul li ul {
			position:absolute;
			width:10em;
			left:-1px; 			
		}
			
		div#nav ul li ul li {
			width:100%;
			border-left:1px solid #eb7c00;
			border-bottom:1px solid #eb7c00;
			border-right:1px solid #eb7c00;
			background: #e8e8c8;
		}
		
		/* 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 */

/************** End Navigation ********************/
		
		#bCrumb {
			padding: 5px;
		}
		
		strong {
			color: #004a2b;
		}
		
		#instruct {
			position:relative;
			padding: 0 0 0 3.5em;
			width: 35em;
			line-height: 1.3em;
			color: #4c4c4c;
			float:left;
		}
		
		#filterBox {
			border: 1px solid #ccc;
			background: #e8e8c8;
			width:35%;
			margin: 0 0 0 3em;
			padding: 5px;
			position: relative;
			float:left;
		}
/* clear method needed to keep two div's from wrapping in IE */	
		.clear {
			clear:both;
		}
		
/************** Table Specific Tags ********************/	
		table {
			width: 100%;
			border-collapse: collapse;
		}
		
		caption {
			font: bold 16px Arial;
			color: #406940;
			text-align:left;
			padding: 15px 0 3px 0;
		}
		
		td {
			padding: 3px;
			text-align:right;
		}
		
		th {
			background-color:#004A2A;
			color: #fff;
			text-align:right;
		}
		
		.mediumgreenLabel {
			background-color:#569264;
			color: #fff;
			font: bold 10px Verdana;
		}
		
		.alt {
			background-color: #E8E8C8;
		}
/************** End Table Specific Tags ********************/
		
		#footer {
			background: #004a2b;
			height: 35px;
			line-height: 35px;
			vertical-align:center;
			text-align: right;
			padding: 0 0 0 10px;
			margin:5em 0 0 0;			
		}
		
		#footer span {
			float:left;
			color: #fff;
			padding: 0 0 5px 0;
		}
		
		a:link, a:active, a:visited {
			text-decoration: underline;
			color: #ec7c01;
		}
		
		a:hover {
			text-decoration: none;
		}
	</style>
</head>

<body>
<!-- begin content -->
<div id="mainContainer">
<p class="topLog"><span>You are representing <strong>Someone</strong></span>Welcome <strong>Super User</strong> | <a href="log">Log out</a></p>
<!-- beginning header with NAV -->
<div id="header">
	<span><img src="imgs/agr_logo.jpg" width="148" height="75" /></span><img src="imgs/topImg.jpg" id="topImg" name="topImg" width="465" height="75" alt="Image of Sifter" />
</div>
<!-- end header -->
<!-- begin nav -->
<div id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Position</a></li>
			<ul> <!-- drop down menu items -->
				<li><a href="#">Reports</a></li>
				<li><a href="#">Purchases</a></li>
				<li><a href="#">Sales</a></li>
				<li><a href="#">Inventory Adjustments</a></li>
			</ul>
		<li><a href="#">Profiles</a></li>
		<li><a href="#">Administration</a></li>
		<li><a href="#">Help</a></li>
	</ul>
</div>
<!-- end nav -->
<!-- begin content area divs -->
<div id="bCrumb"><a href="index.html">Home</a> &gt; Position Review</div>
<div id="textFld">
	<h1>Purchases</h1>
	<div id="instruct">
	<p>INSTRUCTIONS: Use the filter to view all purchase or sale transactions that have been entered for your location. Once your position report is generated, based on the specified criteria, use the buttons at the bottom of the page to add new transactions. The “Edit” hyperlink to the right of transactions that have already been entered will allow you to make any changes needed.</p>
	<p><input type="Checkbox"> Show All Order Details</p>
	</div>
	<div id="filterBox">
	</div>
	<p class="clear"></p>
	<div id="tableBox">
			**table goes here **
	</div>
</div>
<!-- end content area divs -->
<!-- begin footer -->
<div id="footer">
	<span>Copyright &copy; 2006. All rights reserved.&nbsp;&nbsp;&nbsp;<a href="#">Contact Us</a> | <a href="#">User Agreement</a> | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></span><img src="imgs/Logo_bottom.gif" width="79" height="35" alt="" />
</div>
<!-- end footer -->
</div>
<!-- end container -->


</body>
</html>

I totally don't know what's going on here...it won't even work in FF. It just displays the list-items in a line. It doesn't even hide the ones that don't need to be seen at first.

Any help would be greatly appreciated.

Here's what I'm going for. example

**awestmoreland** · Sep 20, 2006 12:31

I couldn't quite see what was going on without the graphics (base URL for the site would help in debugging) but my instinct tells me you may need to change this:

Code:

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Position</a></li>
 <ul> <!-- drop down menu items -->
  <li><a href="#">Reports</a></li>
  <li><a href="#">Purchases</a></li>
  <li><a href="#">Sales</a></li>
  <li><a href="#">Inventory Adjustments</a></li>
 </ul>
 <li><a href="#">Profiles</a></li>
 <li><a href="#">Administration</a></li>
 <li><a href="#">Help</a></li>
</ul>

to this:

Code:

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Position</a>
  <ul> <!-- drop down menu items -->
   <li><a href="#">Reports</a></li>
   <li><a href="#">Purchases</a></li>
   <li><a href="#">Sales</a></li>
   <li><a href="#">Inventory Adjustments</a></li>
  </ul>
 </li>
 <li><a href="#">Profiles</a></li>
 <li><a href="#">Administration</a></li>
 <li><a href="#">Help</a></li>
</ul>

Andy

**amidude** · Sep 20, 2006 13:23

Hmmmm....didn't work.

**amidude** · Sep 21, 2006 07:40

Man, no matter what I do I can't get this to work in FF. I can get it to work in IE but that sucks. Why won't it work in FF? When I tried your suggestion of placing the </li> tag at the end of the embedded <ul> tag it wouldn't work in either browser. Is there a tutorial that will show me exactly how to do this the way I'm trying too? I haven't found a good one yet and I'm pretty sure I'm not looking in the right place.

My goal is to do this without having to use Javascript and the only example I've found is the SuckerFish example but it uses javascript. Is this not able to happen? Am I way off base here?

Also, the Stu Nicholls version uses the <table> tag and I don't want to use those if I can help it.

**DCS** · Sep 21, 2006 08:49

The Suckerfish version is the way to go. This can not be done without JS abd still work in older IE. It will work in Firefox iwhtout the JS.

**amidude** · Sep 21, 2006 09:12

Dang.

I could have swore someone told me that it could be done.

**amidude** · Sep 21, 2006 14:36

I found the version that Eric Meyer's did...still having a few problems.

**Dan Schulz** · Sep 22, 2006 03:30

I have some CSS based dropdown menus floating around here on Sitepoint. I'll dig them up for you and then add the links to this post.

**amidude** · Sep 22, 2006 07:57

Thank you so much...I'm working on the Eric Meyer's version. It's slow going but it's helping me tremendously. I just needed to have a 'walk-through' for lack of a better term. I work better that way. I get shown once and then I'm good. I know...I'm kinda weird that way.

**Dan Schulz** · Sep 22, 2006 08:50

Ugh, I just went over my CSS dropdown posts and realized how bad they really were. I guess a lot can change in one's coding habits over the course of six weeks.

As for requiring a walk-through, you won't believe this, but I'm the same way. Plain English works best. I"m surprised that none of the "mainstream authors" have ever heard of it

.

Give me some time and I'll write one up for you. While I like the one on HTML Dog (for the most part), it DOES have a few flaws, which I'll hope to correct in my version.

**amidude** · Sep 22, 2006 09:05

Sweet...I'm pretty stoked now!!! I'm slowly getting there. Here is what I have so far: www.e-centricity.net/eTest/index.html

It works in IE but not so well in FF. I think some of my modifications to the way Eric Meyers did it is causing problems. I just don't have the experience to see where.

Any help would be greatly appreciated. Also, when I place the code into the code up at the top of this message the hover effects no longer work and the menus don't show up...lamed up or otherwise.

Also thanks for all the help...this is getting fun now.

**amidude** · Sep 22, 2006 12:57

I still can't get the width to look the same in IE and FF...any suggestions?

**amidude** · Sep 22, 2006 14:38

here's something else freaky...I've got the code working to where I can see the drop-downs in both IE and FF but in "Exploder" the dropdowns show up behind a form element I have positioned close to the top of the page. It's a drop-down list using <select> and that's weird. I've tried putting a z-index on the menu so that it would show up above the drop-down list but that doesn't work. Has anyone ever run into this?

**amidude** · Sep 24, 2006 21:57

Is this a stumper?

**Tyssen** · Sep 24, 2006 22:03

To get your list items' width right, #nav li needs to be width: 13em.

You won't be able to fix your dropdown over the select problem though. You either live with it or move the select.

**amidude** · Sep 25, 2006 05:32

Thank you for your help. I appreciate it. It's my first attempt at this type of menu.

p.s.
Your website is awesome.

**amidude** · Sep 25, 2006 08:25

Also, may I ask what I missed when determining the proper width? Is there something there that I should have caught or remembered? Sorry, I just want to know how to do these on my own and whereas I appreciate your proper calculations I just wanted to know how you got there. You know the ol' "teach a man to fish..." dealy? ;-)