BLM Menu: Styling items without links

[dmwhipp]

1) Script Title: BLM Multi-level Effects Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem: Cannot figure out how to style menu items without hyperlinks to match rest of menu

Here is the page: http://www.flimpact.org/testmenu2.html

Here is my menu code:

<div class="mlmenu vertical delay menuback accessible">	
	<ul>
		<li><font class="space">&nbsp;</font><br />About Us
			<ul>
				<li><a class="menu" href="/aboutus/general.html"><font class="space">&nbsp;</font><br />About Florida Impact</a></li>
				<li><a class="menu" href="/aboutus/board.html"><font class="space">&nbsp;</font><br />Board of Directors</a></li>
				<li><a class="menu" href="/aboutus/staff.html"><font class="space">&nbsp;</font><br />Our Staff</a></li>
			</ul>
		</li>
		<li><a class="menu" href="/ptech.html"><font class="space2">&nbsp;</font><br />Partnership To End<br />Childhood Hunger</a></li>
		<li><font class="space">&nbsp;</font><br />Resources For Families
			<ul>
				<li><a class="menu" href="/resources/healthcare.html"><font class="space">&nbsp;</font><br />Healthcare</a></li>
				<li><a class="menu" href="/resources/nutrition.html"><font class="space">&nbsp;</font><br />Nutrition</a></li>
				<li><a class="menu" href="/resources/housing.html"><font class="space">&nbsp;</font><br />Housing &amp; Utilities</a></li>
				<li><a class="menu" href="/resources/income.html"><font class="space">&nbsp;</font><br />Income Assistance</a></li>
			</ul>
		</li>
		<li><a class="menu" href="/yourvoice.html"><font class="space">&nbsp;</font><br />Let Your Voice Be Heard</a></li>
		<li class="nav"><font class="space">&nbsp;</font><br />Publications
			<ul>
				<li><a class="menu" href="/current.html"><font class="space">&nbsp;</font><br />Current Publications</a></li>
				<li><a class="menu" href="/archives.html"><font class="space">&nbsp;</font><br />Archived Publications</a></li>
			</ul>
		</li>
		<li><a class="menu" href="/gallery.html"><font class="space">&nbsp;</font><br />Photo Gallery</a></li>
		<li><a class="menu" href="/contact.html"><font class="space">&nbsp;</font><br />Contact Us</a></li>
	</ul>
</div>

and here is my CSS:

	/*this is the css for the vertical version*/
	.vertical ul{
		list-style-type: none;
		padding: 0px;
		border-top: 0px;
		width:170px;
		margin-left:0px;
		margin-top:0px;
	}
	.vertical li a{
		display: block;
		width:170px;
		text-decoration: none;
		height: 1em;
		padding: .0em 0px;
		border: 0px;
		border-top: 0px;
		margin-left:0px;
	}
	.vertical li{
		/*Needed for IE. Don't ask me why, It was a lucky guess.*/
		display: inline;
		margin-left:0px;
	}
	.vertical li ul{
		position: absolute;
		margin-top: -3.8em;
		margin-left: 170px;
		border: 1px solid #747e30;
	}


	/*colors for menu*/
	.menuback li a{
		background-image:url(/graphicsnew/menufade.png);
		background-repeat: repeat-x;
		border-bottom:5px solid #e1e1b2;
		height:35px; 
		text-align:center;
	}
	.menuback li a:hover{
		background-image:url(/graphicsnew/menufade.png);
		background-repeat: repeat-x;
		border-bottom:5px solid #e1e1b2;
		height:35px; 
		text-align:center;
	}
	.menuback ul{
		border: 0px;
	}


	/*custom css*/

	a.menu { 
		font-family:verdana,arial,sans-serif;
		color:#5c4e1a;
		font-size:12p;
		font-weight:normal;
		text-decoration:none;
	}
	a.menu:visited {
		color: #5c4e1a; text-decoration:none;
	}
	a.menu:active {
		color: #f0efd4;
		text-decoration:none;
	}
	a.menu:hover {
		color: #f0efd4;
		text-decoration:none;
	}

	.space {
		font-family:verdana,arial,sans-serif;
		color:#452e22;
		font-size:8px;
		font-weight:normal;
		margin-top:0px;
		margin-bottom:0px;
	}
	.space2 {
		font-family:verdana,arial,sans-serif;
		color:#452e22;
		font-size:2px;
		font-weight:normal;
		margin-top:0px;
		margin-bottom:0px;
	}

I've been playing with the CSS for over an hour, but cannot figure out how to style the three menu items (About Us, Resources for Families, and Publications) so they will match the other menu items with the background, centered text and height.

Help!

Deborah

[jscheuer1]

You could make them anchor (a) tags without href attributes. They would be styled as the ones with href attributes but would lack :hover in IE 6 and less. Actually, you probably would prefer that situation in all browsers, so you could give them a class and set their :hover identical to their non-hovered rules.

No browser will give them :visited or :active styles, as these will not apply.

Alternatively, you could use a classed span to style them like their linked counterparts. This could be done without :hover, making it a little easier, ex:

	.vertical li a, .vertical li span.linklike {
		display: block;
		width:170px;
		text-decoration: none;
		height: 1em;
		padding: .0em 0px;
		border: 0px;
		border-top: 0px;
		margin-left:0px;
	}

<li class="nav"><span class="linklike"><font class="space">&nbsp;</font><br />Publications</span>

[dmwhipp]

So obvious and I missed it completely. I just implemented it and it works perfectly. Thank you again for your help John.
Deborah