Menu manager - drop down menu parent links

[neroo]

Hello

I have some trouble getting my parent child links styling right.

This is how its made in dreamweaver, and is supposed to be.

Code: Select all

<ul class="menu" id="menu"> 
  <li><a href="#" class="menulink">Top level Link here</a></li>
  <li><a href="#" class="menulink">Top level Parent Link here</a>
  <ul>
    <li><a href="#">Child link here</a></li> 
    <li><a href="#">Child link here</a></li>
    <li><a href="#" class="sub">Parent link here with children</a>
      <ul>
      <li ><a href="#">Child link here</a></li> 
      <li><a href="#">Child link here</a></li>
      </ul>    				
</ul>

This is my Menu Manager so far:

Code: Select all

{if $count > 0}
<ul class="menu" id="menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a class="currentpage" href="{$node->url}">{$node->menutext}</a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a class="fisk" href="{$node->url}">{$node->menutext}</a>

{else}
<li><a class="menulink" href="{$node->url}" {if $node->target ne ""}  target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

And css if it would help:

Code: Select all

ul.menu {list-style:none; margin:0; height:40px; background:#FFF; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#fff; text-decoration:none}
ul.menu li {position:relative; float:left; width:159px; margin-right:1px}
ul.menu ul {position:absolute; top:40px; left:0; background:#282828; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; width:159px; margin:0 height:20px;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#282828}
ul.menu ul li a:hover {background-color:#11c1d0}
ul.menu ul ul {left:159px; top:0px}

ul.menu .menulink {padding:10px 0px 0px; width:159px; height:30px; text-align:center; font-weight:normal; background: url([[root_url]]/uploads/images/site_build_images/menu_bg.gif);}

ul.menu .menulink:hover, ul.menu .menuhover { background: url([[root_url]]/uploads/images/site_build_images/menu_bg_hover.gif) repeat-x;}

ul.menu .currentpage {padding:10px 0px 0px; width:159px; height:30px; text-align:center; font-weight:normal; background: url([[root_url]]/uploads/images/site_build_images/menu_bg_hover.gif);}

ul.menu .sub {background:#282828 url([[root_url]]/uploads/images/site_build_images/arrow.gif) 138px 8px no-repeat}

Probably very wrong, but have just been staring blank at this for 2 days now

Also take a look how it should look like here, and how it shouldnt, here

Good:http://img695.imageshack.us/img695/1982 ... wnmenu.gif

Bad:http://img695.imageshack.us/img695/6489/dropdropbig.gif


Thing is, i cant seem to find out how to avoid the children getting the same class/style, as the top level ones.

Probably just some neat thing that needs to be done in the menu manager code.

[Dr.CSS]

Have you tried using the default cssmenu.tpl and adjusting your code to what it outputs?...

[kendo451]

You forgot to close the second <ul> with </ul>