[Enjin]/[HTML] coding help:

Hello fellow users of Minecraft,

Today I need some help with designing my Enjin website, http://www.mc-nrgcraft.com or http://www.nrgcraft.org. I have noticed on http://www.minetown.net they have a custom scroll bar and also on http://www.craftrealms.com on the very top of their website there is a gray bar which has a drop down menu of all of their server and stuff like that. I have the HTML code for the drop down menu but I have no clue how to actually put it on my website. I tried by making it an HTML module then putting it in its own container at the very top (as say the instructions), but that didn't work. Can some one find me the HTML code for the custom scroll bar? (The exact same one if you can please) And how would I put the drop down menu on to my website as well as the scroll bar. I currently am hosting with a Advanced plan on Enjin if that has anything to do with it.
Here is my HTML code for the drop down menu (tell me if I did something wrong. I am putting the whole thing in the Module so if there's something I need to remove, notify me please).

Code:

<!-- HOW TO:

1. Following the instructions in the different sections below,
customised this code to match your site.

2. Put your entire piece of code in a HTML Module, using the
HTML tab.

3. Put your new module in its own container, as the very top module in your site,
at the top of the Global Top Module

4. Using Container Settings - hide the container Title, Footer and Theme.


-->



<!-- HTML - The following code should be edited to match your site.
ONLY CHANGE THE site name (Dirt Dogs), the names of the links and
the URLs of the links. You can delete entire link rows if eight is too many -->




<div id="netbar">
<div id="discover" role="directory">
<ul>
<li class="suckerfish">
<span class="sitelogo">NRGcraft</span>
<ul class="section-drop">
<li class="link-one"><a href="http://www.dirtdoggaming.com/forums">Main Server</a></li>
<li class="link-two"><a href="http://www.dirtdoggaming.com/calendar">Games Server</a></li>
</ul>
</li>
</ul>
</div>
</div>

<style>

/* *************************************************************** */
/* Picking Styles */
/* *************************************************************** */
/* There are a few different ways you can display your Net Bar. I
have included CSS for them below. To hide CSS from the browser
so that it doesn't affect your page, you comment it out. To
reveal it, you Uncomment it.

To Uncomment something - remove the slash and asterisk before
and after it. To Comment (hide) something, put them back. There
are lots of comments around here that you can copy. Like this
one. */
/* *************************************************************** */

/* *************************************************************** */
/* Enjin Bar Behaviour */
/* *************************************************************** */

/* *** To hide the entire Left-Hand side of the Enjin Bar - uncomment the next line: *** */

/* #enjin-bar .left {display: none;}*/

/* *** To hide the entire Left-Hand side of the Enjin Bar - uncomment the next line: *** */

/* #enjin-bar .right {display: none;} */


/* *** To hide the entire Enjin Bar - uncomment both lines above *** */



/* *************************************************************** */
/* Important */
/* *************************************************************** */
/* The next two sets of attributes control the placement of your
drop-down list. The first one places it at the far left
margin of your page. The second places it in line with your
left-hand column. You must pick one. Not both. */

/* *************************************************************** */

/* To position the Net Bar Drop Down at the far left of your page, like Curse has it -
Uncomment the following and comment out the version below it */

/*

div#netbar {
-moz-box-sizing: border-box;
background: -moz-linear-gradient(center top , #4D4D4D 0px, #343434 100%) repeat scroll 0 0 transparent;
background-color: #4D4D4D;
box-shadow: 0 0 1px #666666 inset, 1px 1px 2px rgba(0, 0, 0, 0.65);
color: #DEE3E6;
height: 28px;
min-width: 1002px;
padding: 0;
position: fixed;
width: 100%;
z-index: 4;
top: 0;
left: 0;
}
*/

/* To position the Net Bar Drop Down in line with your left-hand column - Uncomment the following three items
(div#netbar , div#netbar .suckerfish , #enjin-bar) and comment out the part above */

div#netbar {
-moz-box-sizing: border-box;
background: -moz-linear-gradient(center top , #4D4D4D 0px, #343434 100%) repeat scroll 0 0 transparent;
background-color: #4D4D4D;
box-shadow: 0 0 1px #666666 inset, 1px 1px 2px rgba(0, 0, 0, 0.65);
color: #DEE3E6;
height: 28px;
padding: 0;
position: absolute;
width: 3400px;
z-index: 4;
top: 0;
left: -1460px;
}


div#netbar li.suckerfish {
position: relative;
left: 1410px;
}

#enjin-bar {margin-left: 105px;}


/* *************************************************************** */
/* Images */
/* *************************************************************** */
/* The following sections are where you'll put in your own images
in place of mine. These images are your site logo, and the little
icons that appear before each of your links. */

/* *************************************************************** */


/* Replace my logo URL with one of your own. You will need a logo with a transparaent background, sized 75px by 23px */

div#netbar .sitelogo {
background: url("http://i.imgur.com/Y1985E8.gif") no-repeat scroll 6px 1px transparent;
text-indent: -9999px;
width: 75px;
}

/* These are the little logos that appear before each link.
You will need images that are 10 px by 14 px .
Replace my URLs with your own. */

div#netbar div#discover li.suckerfish ul li.link-one a {
background-image: url("http://files.enjin.com/26297/SiteImages/netbar/netbardiamond.png");
background-position: 10px center;
}
div#netbar div#discover li.suckerfish ul li.link-two a {
background-image: url("http://files.enjin.com/26297/SiteImages/netbar/netbarpaw.png");
background-position: 5px center;
}

/* Put the Enjin Bar on top of the Netbar */
#enjin-bar { z-index: 25; }

/* hide the link to your homepage, we don't want that appearing, no matter what style we choose*/

div#enjin-bar > div.left > a:first-child {display: none;}

#netbar li {
list-style: none outside none;
}


div#netbar a {
color: #DEE3E6;
}
div#netbar a:hover {
color: #FFFFFF;
}
div#netbar li {
float: left;
margin: 0;
position: relative;
}
div#netbar > a {
border-right: 1px solid #333333;
display: block;
float: left;
line-height: 29px;
padding: 0 10px;
}
div#netbar > a:hover {
background: none repeat scroll 0 0 #222222;
}
div#netbar .suckerfish {
z-index: 9998;
}
div#netbar .suckerfish > .section-drop {
background-color: #222222;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: medium none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
position: absolute;
z-index: 2;
float: left;
}
div#netbar .suckerfish > a, div#netbar .suckerfish > span {
display: block;
font-size: 12px;
line-height: 12px;
padding: 8px 16px 9px 10px;
white-space: nowrap;
}
div#netbar .suckerfish ul li {
float: none !important;
margin: 0;
width: auto;
}
div#netbar .suckerfish:hover {
background-color: #222222;
}
div#netbar .suckerfish > ul li a {
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 12px;
white-space: nowrap;
}
div#netbar .suckerfish > ul li a:hover {
background-color: #111111;
}
div#netbar .suckerfish > ul li:last-child a {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
div#netbar .suckerfish > span:after, div#netbar .suckerfish > a:after {
border-color: Silver transparent transparent;
border-right: 3px dashed transparent;
border-style: solid dashed dashed;
border-width: 3px 3px 0;
content: "";
display: block;
height: 0;
line-height: 0;
padding-top: 1px;
position: absolute;
right: 6px;
top: 13px;
width: 0;
}


div#netbar div#discover {
float: left;
height: 28px;
}
div#netbar div#discover ul > li {
float: left;
height: 28px;
line-height: 28px;
position: relative;
}
div#netbar div.help-links {
border-right: 1px solid #333333;
float: left;
}
div#netbar div#discover ul li span {
border-right: 1px solid #333333;
}
div#netbar div#discover ul li span:hover {
color: #FFFFFF;
cursor: default;
}
div#netbar div#discover li.suckerfish ul {
top: 27px;
width: 160px;
padding-left: 0;
}
div#netbar div#discover li.suckerfish ul li a {
background-position: left center;
background-repeat: no-repeat;
padding-left: 30px;
}

.suckerfish .section-drop{
left: -9999px;
}
.suckerfish:hover .section-drop{
left: -40px;
}
</style>


When I place the code in to an HTML module then in its own container at the very top it comes up as text (it actually shows the code in text). Please help.

Thanks,
BrushPainter