Dropdown menu

[HekkeySE]

I want to implement the following drop down menu. But how can i put the #drop1 #drop2 etc in the menu manager? Or is there another way to implement this?

CSS:

Code: Select all

/* ### menu box ### */
		.menuBox { position: absolute; top: 113px; left: 27px; width: 940px; height: 40px; border-bottom: 2px solid #aadac1; border-top: 2px solid #aadac1; }
		.menuBox ul { list-style: none; }
		.menuBox li { float: left; line-height: 40px; margin-right: 36px; font-size: 20px; position: relative; } 
		.menuBox li a { color: #0e2a8b; display: block; text-decoration: none;}
		.menuBox li a.drop { background: url('../images/arrow1.png') no-repeat right 20px; padding-right: 13px;  }
		.menuBox li a:hover { text-decoration: underline; } 
		.menuBox li a.drop.active { background: url('../images/arrow3.png') no-repeat right 20px; }
		.menuBox li ul { background: #0e2a8b; width: 140px; position: absolute; top: 35px; left: 0; padding: 10px; }
		.menuBox li li { margin: 0; line-height: 18px; font-size: 16px; width: 140px; }
		.menuBox li li a { color: #fff; text-decoration: none; }
		.menuBox .hidden { display: none; }

HTML:

Code: Select all

<!--  / menu box \ -->
	  		<div class="menuBox">

				<ul>
					<li><a href="#">Home</a></li>
                    <li><a class="drop" href="#drop1">Menu2</a>
                    	<ul id="drop1" class="tab hidden">
                        	<li><a href="fsfsdf.html">fsfsdf.html</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                        </ul>
                    </li>
                    <li><a class="drop" href="#drop2">Menu3</a>
                    	<ul id="drop2" class="tab hidden">
                        	<li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                        </ul>
                    </li>
                    <li><a class="drop" href="#drop3">Menu4</a>
                    	<ul id="drop3" class="tab hidden">
                        	<li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                            <li><a href="#">sub menu</a></li>
                        </ul>
                    </li>
				</ul>
                
			</div>
		    <!--  \ menu box / -->

CMS menu template:

Code: Select all

{if $count > 0}
<div class="menuBox">
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string='<ul class="tab hidden">' 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->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="drop"><a 
{elseif $node->current == true}
	<li><a  
{elseif $node->haschildren == true}
	<li class="drop"><a 
{elseif $node->type == 'sectionheader'}
        <li><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
        <li>
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><span>{$node->menutext}</span></a>
{/if}

{/foreach}

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

[Dr.CSS]

Why do you need drop1, drop2, etc., I don't see anything for it in the CSS, do you have a working example of what you are trying to do?...

[HekkeySE]

I mean this:

<li><a class="drop" href="#drop1">Menu2</a>
<li><a class="drop" href="#drop2">Menu2</a>
<li><a class="drop" href="#drop3">Menu2</a>

[Dr.CSS]

Set the page/content type as external link and use #drop1 as URL...