Need help with wayfinder menu

I’ve gone through a lot of tuts and examples but they don’t work for me so I’m frustrated now. How do I take this simple menu list and make it a wayfinder vertical menu? All of the below works as is but it’s not dynamic thus the need for wayfinder.

Here is my list in the code:
<div id="navcontainer">
<ul id="navlist">
<li><a href="" title="">HOME</a></li>
<li><a href="" title="">NBPC Carolinas</a></li>
<li><a href="" title="">NBPC Midwest</a></li>
<li><a href="" title="">NBPC Southeast</a></li>
<li><a href="" title="">NBPC DJ Report</a></li>
<li><a href="" title="">FEATURED ARTIST</a></li>
<li><a href="" title="">CONFERENCES</a></li>
<li><a href="" title="">SCHOLARSHIPS</a></li>
<li><a href="" title="">NBPC REMEMBERS</a></li>
</ul>
</div>



And Here is the CSS
#navlist
{
padding: 1px;
margin-left: 0px;
font: 11px verdana, sans-serif;
width: 100%;
color: gray;
}

#navlist li
{
list-style: none;
margin: 0px;
border-left: 0px #004080 solid;
border-bottom: 1px gray solid;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.5em 0.5em 0.5em 0.9em;
text-decoration: none;
}

#navlist li a:link {
color: #f8d501;
}
#navlist li a:visited {
color: #f8d501;
}

#navlist li a:hover
{
font-weight:bold;
color: #333333;
background: #CCCCCC;
border-left: 3px #f8d501 solid;
}


Any help will be GREATLY appreciated.

Create a chunk named "outer-nav" with this code:

Use the snippet call in your template :

Add your menu CSS to your CSS file and reference it in the <head> section of your template

Thanks so much with bit of code. It works perfectly. No is when I get greedy. How do you make this handle the nested menu items? Can this be modified to do so? Thanks again and I hope you can help with this part.

Have a look here for some ideas on different menu options.

Thnaks, I’ll definitely do that and post my results.