CMS Made Simple Forums

Posted: **Mon Oct 27, 2008 10:04 pm**

hello,
I'm having a challenge in trying to figure out how to customize the top li's for the Navigation: CSSMenu - Horizontal menu.

This is what I'm trying to do...I have an simple HTML menu i wrote in notpad...

Code: Select all


	<div id="des01navtop">
		<ul>
			<li><a href="/welcome" onmouseover="this.blur();"><span>HOME</span></a></li>
			<li><a href="/services" onmouseover="this.blur();"><span>PORTFOLIO</span></a></li>
			<li><a href="/news" onmouseover="this.blur();"><span>ABOUT US</span></a></li>
			<li><a href="/showcase" onmouseover="this.blur();"><span>MORE</span></a></li>
			<li><a href="/reachus" onmouseover="this.blur();"><span>CONTACT US</span></a></li>
		</ul>	
	</div><!--navtop ends/-->

and connects with a stylesheet I wrote...

Code: Select all


/*layouts for menu*/
#des01navtop ul li a {
    display: block;
    float: left;
    height: 28px;
    margin-right: 8px;
    padding-right: 4px;
}

#des01navtop ul li a span {
    display: block;
    line-height: 14px;
    padding: 7px 5px 7px 10px;
} 

#des01navtop ul li a:hover {
    background-position: bottom right;
    color: #ddd;
    outline: none;
}

#des01navtop ul li a:hover span {
    background-position: bottom left;
}


/*skirts for menu*/
#des01navtop ul li a {
    background: transparent url(../images/des01red_broll_a.gif) no-repeat scroll top right;
    color: #fff;
	font: bold 12px arial, sans-serif;
	text-decoration:none; 
}

#des01navtop ul li a span {
    background: transparent url(../images/des01red_broll_a_span.gif) no-repeat;
 }

my dream is to have this functionatily used in my cmsms code, as well as give it sub sections that hide/show like the original : CSSMenu - Horizontal menu does.

So i figured I would start by editing the original CSSMenu - Horizontal menu file directly, but can't seem to find the one style that controls the top level li's. In conclusion I want to be able to customize the top level li's of my menu so they stand out from the sub ul's and li's that are nested below, such as placing a background image on their rollover effects. If there is a technique or solution i'm overlooking, I will be very greatful for the scoop

thanks!

Posted: **Mon Oct 27, 2008 10:42 pm**

got it!
just modify the node->depth or node->hierarchy in my smarty code.

sweet!

CMS Made Simple Forums

how to customize top level li's "only" for horizontal cssmenu

how to customize top level li's "only" for horizontal cssmenu

Re: how to customize top level li's "only" for horizontal cssmenu