Hi, the main issue that produces a JS error is that your menu structure is not valid – i.e. the following:
<li class="four columns alpha omega"><a href="#" class="categories-btn">Categories</a></li>
<ul>
<li><a href="#">Business</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Entertainment/arts/literature</a></li>
<li><a href="#">Government</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Law/criminal justice</a></li>
<li><a href="#">Religion</a></li>
<li><a href="#">Sports/recreation/adventure</a></li>
</ul>
should look like this (the closing LI tag should be after its sub UL element):
<li class="four columns alpha omega"><a href="#" class="categories-btn">Categories</a>
<ul>
<li><a href="#">Business</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Entertainment/arts/literature</a></li>
<li><a href="#">Government</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Law/criminal justice</a></li>
<li><a href="#">Religion</a></li>
<li><a href="#">Sports/recreation/adventure</a></li>
</ul>
</li>
The next thing is that you have this rule:
.navigation a {
text-indent:-300em;
...
}
in http://69.89.31.123/~whimsie6/50-wise-site/style.css which affects the sub menus’ text and it is currently invisible. You could fix this, for example, by using another rule like:
#main-menu ul a {
text-indent:0;
}
Apart from fixing these, you just need to style your sub menus as you like.
Cheers!
.
