Making A Menu Item Drop Down

[TeeJay2012]

Hey Guys,


I know enough to that the code below needs to be changed in addition to the css file but I have tried and the additional menu items I add to the code below
show on the website scrambled. Can anyone help me out a little. Thanks!!!



<div id="slidetabsmenu">
<ul>
<li {if $mainmenu eq "b"}id="current"{/if}><a href="http://blog.boitube.com"><span>{$lang5|upper}</span></a></li>
<li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community"><span>{$lang4|upper}</span></a></li>
<li {if $mainmenu eq "5"}id="current"{/if}><a href="http://spankpages.com/links/"><span>Links</span></a></li>
<li {if $mainmenu eq "6"}id="current"{/if}><a href="{$baseurl}/albums"><span>{$lang3|upper}</span></a></li>
<li {if $mainmenu eq "c"}id="current"{/if}><a href="{$baseurl}/categories"><span>{$lang2|upper}</span></a></li>
<li {if $mainmenu eq "" OR $mainmenu eq "0"}id="current"{/if}><a href="{$baseurl}/"><span>{$lang0|upper}</span></a></li>
</ul>
</div>

[Excavator]

Hello TeeJay2012,
I'm not familiar with your $mainmenu/$lang stuff, which seems invalid no matter what DocType I try, but I do have a simple example of how a CSS drop down menu works here. Maybe that will help you.

[TeeJay2012]

Thanks for your reply and thanks for the link it did help me a lot. I'd like to explain a little further and maybe your input can put me on the right track.

If you never mind the "$mainmenu/$lang" crap everything else works the same.

This is what I've done with the html coding so far:

<div id="slidetabsmenu">
<ul>

<li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community"><span>{$lang4|upper}</span></a>

<ul>

<li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community1"><span>{$lang4|upper}</span></a>
<li {if $mainmenu eq "7"}id="current"{/if}><a href="{$baseurl}/community2"><span>{$lang4|upper}</span></a>
</ul>

</li>

<li {if $mainmenu eq "6"}id="current"{/if}><a href="{$baseurl}/albums"><span>{$lang3|upper}</span></a></li>
<li {if $mainmenu eq "c"}id="current"{/if}><a href="{$baseurl}/categories"><span>{$lang2|upper}</span></a></li>
<li {if $mainmenu eq "" OR $mainmenu eq "0"}id="current"{/if}><a href="{$baseurl}/"><span>{$lang0|upper}</span></a></li>
</ul>
</div>

* The additional links show up but I guess they need to be styled in css.
Here is the css files below. How can I get the links to align properly, hide and drop down when I hover over a menu item?

Here is the css info:

#slidetabsmenu {
float:right;
width:100%;
font-size:14px;
height: 30px;
line-height:normal;
margin: 8px 0 0 0;
}
#slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
}

#slidetabsmenu li{
display:inline;
padding:0;
}

#slidetabsmenu a {
float:right;
background:url(<?php echo $imageurl; ?>/tab-left.png) no-repeat left bottom;
background-position:0% -70px;
margin: 0 0 0 2px;
padding:0 0 0 13px;
font:bold 12px/28px Arial, Helvetica, sans-serif;
color:#fff;
}

#slidetabsmenu a span {
float:right;
cursorointer;
display:block;
height:30px;
background:url(<?php echo $imageurl; ?>/tab-right.png) no-repeat right bottom;
background-position:100% -70px;
padding: 0px 20px 0px 11px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: #fff;
background-color: #0066FF;
border-radius: 5px;

}

#slidetabsmenu #current a {
background-position:0 0px;
}

#slidetabsmenu #current a span {
background-position:100% 0px;
color: fff27.01.2009 16:09:33;
}

#slidetabsmenu a:hover {
background-position:0% -35px;
}

#slidetabsmenu a:hover span {
background-position:100% -35px;



Thanks again for your help so far!!!