BLM Menu: Styling items without links [Archive]

dmwhipp

02-13-2009, 06:23 PM

1) Script Title: BLM Multi-level Effects Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/blmmenu/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>  About Us
<ul>
<li><a class="menu" href="/aboutus/general.html">  About Florida Impact</a></li>
<li><a class="menu" href="/aboutus/board.html">  Board of Directors</a></li>
<li><a class="menu" href="/aboutus/staff.html">  Our Staff</a></li>
</ul>
</li>
<li><a class="menu" href="/ptech.html">  Partnership To End Childhood Hunger</a></li>
<li>  Resources For Families
<ul>
<li><a class="menu" href="/resources/healthcare.html">  Healthcare</a></li>
<li><a class="menu" href="/resources/nutrition.html">  Nutrition</a></li>
<li><a class="menu" href="/resources/housing.html">  Housing & Utilities</a></li>
<li><a class="menu" href="/resources/income.html">  Income Assistance</a></li>
</ul>
</li>
<li><a class="menu" href="/yourvoice.html">  Let Your Voice Be Heard</a></li>
<li class="nav">  Publications
<ul>
<li><a class="menu" href="/current.html">  Current Publications</a></li>
<li><a class="menu" href="/archives.html">  Archived Publications</a></li>
</ul>
</li>
<li><a class="menu" href="/gallery.html">  Photo Gallery</a></li>
<li><a class="menu" href="/contact.html">  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

02-15-2009, 04:53 PM

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">  Publications