Never-mind, I figured it out and it works great!

Here is the CSS on my site for a working, multilevel top-bar menu:

/*=========Topbar=========*/

#top-bar {
bottom: 0;
height: 36px;
display: block;
left: 0;
position: absolute;
z-index: 2;
}
#top-bar ul {
float: left;
padding: 0;
height: 36px;
margin: 0;
background: url(http://themes.wdfiles.com/local--files/maple/nav-divider.png) no-repeat 0 0;
}
#top-bar ul li {
display: inline;
font-size: 14px;
padding: 0 2px 0 0;
height: 36px;
margin: 0;
position: relative;
background: url(http://themes.wdfiles.com/local--files/maple/nav-divider.png) no-repeat 100% 0;
}
#top-bar ul li a {
display: block;
color: #ddd;
font-weight: bold;
height: 15px;
padding: 9px 26px 12px;
text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
}
#top-bar ul li a.current-link,
#top-bar ul li a:hover,
#top-bar ul li.sfhover > a {
background: #2d3234;
background: rgba(0,0,0,0.2);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.15)), to(rgba(0,0,0,0.35)));
background: -moz-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.35));
background: -o-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.35));
text-decoration: none;
}
#top-bar ul li ul {
color: #fff;
visibility: hidden;
opacity: 0;
font-size: 1em;
left: 0;
line-height: 1.8em;
padding: 4px 0;
position: absolute;
z-index: 100;
width: 160px;
height: auto;
border: none;
background: #313537 url(http://themes.wdfiles.com/local--files/maple/footer-bg.png) repeat-x 0 0;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
}
#top-bar ul li:hover ul,
#top-bar ul li.sfhover ul {
display: inline-block;
opacity: 1;
}
#top-bar ul li ul li {
padding: 0 10px;
background: none;
border: none;
display: inline-block;
width: auto;
height: auto;
}
#top-bar ul li ul li a {
background: none;
padding: 6px 0;
text-transform: none;
line-height: 1;
height: auto;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
background: none;
}
#top-bar ul li ul li a:hover {
color: #fff;
border: none;
height: auto;
}

#top-bar ul li ul li:hover {
opacity: 1 !important;
}
#top-bar ul li ul li:hover ul {
opacity: 1 !important;
height: auto !important;
}
#top-bar ul li ul li:hover ul {
opacity: 1 !important;
height: auto !important;
}
#top-bar ul li ul li ul {
opacity: 0 !important;
line-height: 1.8em;
top: 0px;
margin-left: 160px;
position: absolute;
z-index: 1000;
background: #313537 url(http://themes.wdfiles.com/local--files/maple/footer-bg.png) repeat-x 0 0;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
}

And using Wikidot code it can be used like this:

* [[[Category1]]]
 * [[[Major1]]]
 * [[[Major2]]]
  * [[[Minor1]]]
  * [[[Minor2]]]
  * [[[Minor3]]]
 * [[[Major3]]]
* [[[Category2]]]
 * [[[Major1]]]
 * [[[Major2]]]
  * [[[Minor1]]]

Is this CSS method known already? Because I tried before and couldn't find any documentation on how to do this. Anyway, I hope this will be useful to whoever else is as confused as I was.