SOS - CSS Dropdown menu woes

ShaneC · 07-19-2008, 05:33 PM

Hello all,

I'm spinning in circles, so I'll try to make it simple.

First things first. I'm trying to do drop down menus for my nav buttons at this site I'm working on here: http://cr.xt-arts.com.

I want this: http://www.tanfa.co.uk/css/examples/menu/hs7.asp, I tried using this: http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp, my site became this: http://neatorama.cachefly.net/images...omb-badger.jpg (aka this).

I couldn't get the CSS menu to be in position, I couldn't get the darn things to be in a hierarchy. It was just brutal. I don't consider myself ignorant of CSS/HTML but this I just can't get my head around!

If anyone could at least nudge me in the right direction or find a tutorial that can better suit my situation I would be VERY appreciative! I didn't bother posting my attempted code because frankly it wasn't going anywhere. You can see the code examples I used at the tutorial page. If you can recommend how I can implement them with my image/div/css-roll-overs it would be great!

harbingerOTV · 07-19-2008, 07:32 PM

Shane,

the bomb pic made me snort beer out my nose

kudos.

You have a working link to the page where the nav is breaking? Looking at the tutorial, it should be pretty "simple" but nesting lists can be tricky until you get use to it. If you have some working code it would be easier to lend a hand.

ShaneC · 07-19-2008, 07:37 PM

Harbinger, first thanks for the response!

I have updated the current page (http://cr.xt-arts.com) with the explosion of my attempt. I haven't tried hiding/showing yet because that is irrelevant if it makes all my images be thrown aside.

If there is any code you would like me to post here for convenience please let me know!

harbingerOTV · 07-19-2008, 07:57 PM

Shane,

this is confusing the crap out of me.

Code:

				
					<div id="menu">
						<ul>
						<li><h2><div class="btn-home" ><a href="#" ></a></div></h2>
							<ul>
      							<li><a href="#" title="CSS Hover Navigation">My Test Link</a></li>
							</ul>
						</li>
						</ul>

								
						<div class="btn-aboutus" ><a href="#" ></a></div>
						<div class="btn-news" ><a href="#" ></a></div>
						<div class="btn-issues" ><a href="#" ></a></div>
						<div class="btn-campaigns" ><a href="#" ></a></div>
						<div class="btn-outreach" ><a href="#" ></a></div>
						<div class="btn-blog" ><a href="#" ></a></div>
						<div class="btn-contactus" ><a href="#" ></a></div>
						<div class="btn-login" ><a href="#" ></a></div>
						
					</div>

the divs that are your menu are not even in the ul that is your menu. that among some other stuff is the issue.

give me a sec and I'll make a simple nested list example that might help.

-alan

harbingerOTV · 07-19-2008, 08:12 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css" media="screen">

/* turn off all padding, margins and styles of your list items */
ul, li {
padding: 0;
margin: 0;
list-style: none;
}

/* tell your main nav elements to go horizontal */

li {
float: left;
width: 100px;
text-align: center;
}

/* hide the sub navs */

li ul {
display: none;
}

/* show the subs on hover */

li:hover ul {
display: block;
}

/* since I floated the LI you need to unfloat the sub nav LI */
li ul li {
clear: left;
}

</style>
	
</head>
<body>

<!-- its all about nesting and nesting properly -->

<ul>
<li>1st link
  <ul>
	<li>Sub link</li>
	<li>Sub link</li>
	<li>Sub link</li>
  </ul>
</li>

<li>1st link
  <ul>
	<li>Sub link</li>
	<li>Sub link</li>
	<li>Sub link</li>
	<li>Sub link</li>
	<li>Sub link</li>
  </ul>
</li>

<li>1st link
  <ul>
	<li>Sub link</li>
	<li>Sub link</li>
  </ul>
</li>
</ul>


</body>

</html>

try this is a base.

It won't work in IE lt 7 but there is some Javascript to help out.

http://www.xs4all.nl/~peterned/examples/cssmenu.html

this is the file you need:

http://www.xs4all.nl/~peterned/htc/csshover.htc

ust save the page as csshover.htc and make sure the path to it in the following CSS is correct.

this is the code for your CSS to make it work:

Code:

	body {
		behavior:url("../htc/csshover.htc");
	}

using this will cause a CSS validation error but to me it's not a bother. If you want you can make a conditional comment for IE lt & and feed them this.

Try this all out and see where you get. If you need some more help just shout.

-Alan

ShaneC · 07-19-2008, 08:43 PM

Thank you very much for your advice Alan! I've made a lot of progress.

I've updated the page with my most recent attempts (http://cr.xt-arts.com).

The last three problems I'm working with are:

1) When you hover over the item it pushes everything to the right
2) I'd like to make it so that the entire li cell is a link (ie. <li>Sub link</li> is all linked and can be clicked to go to a new page).
3) IE. I put the script online and referenced it in my body of global.css (accessed from index.css) but it still doesn't appear in IE!

Thanks again for all your help!

ShaneC · 07-20-2008, 03:59 AM

Tried quite a bit of different things and somehow wound up with my site on a rewrite engine.

Still no fluid pop up CSS boxes, though. Gah.