about bevel horizontal menu

hi, i'm very beginner with css and general codes.
i see that mybb is very hard if you want build something,
while WordPress is very easy also for beginners.

i wanted a new menu bar, where add some elements,
maybe 4, maybe 10, or maybe use the default mybb bar
and "bevel horizontal menu" like a second one.

i have copy the css code, but of course i have copy it
in the wrong place, i think.

why on the top of the code you don't write where to go
for copy all the codes included in the page ???

without guide, i have follow my brain:
1) i go in acp, templates & style
2) on the center page i choose default theme
3) on the center page i choose global.css
4) then the button: edit stylesheet advanced mode
5) on the code, i go bottom and i add the css i have
found on dd page, exactly this:

Code:

---

<style type="text/css">

.bevelmenu{
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #FFF2BF;
text-align: left; /*set value to "right" for example to align menu to the right of page*/
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

i don't have add also the html code:

<ul class="bevelmenu">
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>

---

because i don't know where it must be write.

thank anyone for the help