Pure CSS Menu

[subnet_rx]

I'm trying to do something that should be rather simple, but I can't get it to work. Basically, I want an expandable menu, but I don't want it to be dynamic. I'd like to have the sub-menu's load for every page, but if they are a part of the "closed" class to not display. If they have class="open", then display like normal. It's working on Firefox, but IE seems to have problems with the nested lists. Here is my code:

<ul class="navigation">
<li><a href="">Academics</a></li>
<ul class="closed">
<li><a href="">Colleges and Schools</a></li>
</ul>

<li><a href="">Admissions</a></li>
<ul class="opened">
<li><a href="">Apply Now!</a></li>
<li><a href="">Undergraduate Admissions</a></li>
<li><a href="">Graduate Admissions</a></li>
<li><a href="">International Admissions</a></li>
</ul>


<li><a href="">Financial Information</a></li>

<li><a href="">Housing</a></li>

<li><a href="">Campus Life</a></li>

<li><a href="">Student Services</a></li>

<li><a href="">First Year Experience</a></li>

<li><a href="">About the University</a></li>

</ul>

The opened and closed classes basically contain display:block and display:none respectively.

[Northern Star]

Can you post your CSS as well please?

Have you got a sample page we can look at so we can see the IE problem your trying to explain?

[amidude]

I could be wrong but you have to wrap the drop-down menu in an <li> tag. Something like this:

<ul class="level1">
		<li><a href="#">link</a></li>
		<li class="submenu"><a href="#">link</a>
			<ul class="level2"> <!-- drop down menu items -->
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
			</ul>
		</li>		
		<li class="submenu"><a href="#">link</a>
			<ul class="level2"> <!-- drop down menu items -->
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
			</ul>
		</li>		
		<li class="submenu"><a href="#">link</a>
			<ul class="level2"> <!-- drop down menu items -->
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</li>
		<li><a href="#">link</a></li>
	</ul>

...at least that's how I understand it to work.

[subnet_rx]

well, I've actually got it working now. My main problem at this poing is IE spacing. I'll post my code:

#navcontainer 
{ 
	margin: 0px;
	padding:0px; 
	text-align:left;
}

#navcontainer ul
{
	list-style-type:none;
	margin:0px;
	margin-left: 10px;
	padding:0px;
}

#navcontainer li 
{ 
	margin: 0 0 1px 0; 
	padding:0px;
}

#navcontainer a
{
	display: block;
	margin:0px;
	padding:0px;
	color: #000;
	text-decoration: none;
	font-weight:bold;
}

#navcontainer ul ul li 
{ 
	margin: 0 0 1px 0;
	padding:0px; 
}

#navcontainer ul ul a
{
	display: block;
	margin: 0px;
	padding:0px;
	color: #000;
	text-decoration: none;
	font-weight:normal;
}

.closed
{
	display:none;
}

.opened
{
	display:block;
	margin:0px;
	padding:0px;
}

Basically, I wrapped it all in a div called navcontainer. It's styled and working exactly how I want in in FF, but in IE, I have top and bottom padding/margins between each item that shouldn't be there.

[Northern Star]

I always start my CSS with...

* {
     margin: 0;
     padding: 0;
}

That way you can be sure that absolutely everything has it's margin/padding reset to 0. It means more work in styling up your content, but you can be sure to element browser quirks and ensures you pay attention to every element when you produce your CSS.

See if it helps with your IE problem.

[subnet_rx]

Normally, that is what I do also. With this application though, which is a outsourced template from another vendor, my manager wants it to stay exactly the same. I basically talked him into lists for the navigation, instead of the nested table and cells they had there to begin with. So, I have to try to work with my menu alone and what is affecting it.

[Dan_A]

Isn't the whitespace bug affecting your unordered list menu?

[Dan Schulz]

Try adding width: 100% to your anchor rule.

#navcontainer a
{
	display: block;
	margin:0px;
	padding:0px;
	color: #000;
	text-decoration: none;
	font-weight:bold;
	width: 100%;
}

[subnet_rx]

Try adding width: 100% to your anchor rule.

#navcontainer a
{
	display: block;
	margin:0px;
	padding:0px;
	color: #000;
	text-decoration: none;
	font-weight:bold;
	width: 100%;
}

Your a genius.

[Dan Schulz]

It's IE's layout bug. Adding a width (or height, depending on the need) will solve virtually all of IE's bugs without requiring the use of actual hacks.

[subnet_rx]

Thanks for the tip, I constantly have problems with extra space in IE.

[Dan Schulz]

Not a problem.