Como personalizar um menu?

• Descrição:

Olá, eu queria saber como faço pra por o menu tipo desse forum: http://glee-rpg.forumeiros.com/                            e queria saber tambem como faço pra deixar a categoria da largura do fórum também

• Informações:

Código:

a.mainmenu {
padding: 5px;
margin-top: 30px!important;
margin-right: 2px !important;
font-family: Wire One;
font-size: 18px;
color: #ffffff;
letter-spacing: 1px;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition-duration: 1s;
}
a.mainmenu:hover {
text-transform: none;
letter-spacing: 5px;
color: #f4e000;
}

Código:

#wrap {
padding: 5px !important;
min-width: 935px !important;
max-width: 700px !important;
font-size: 10px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #COLOR;
padding-top: 100px;
padding-bottom: 20px;
}

Código:

#wrap {
margin-left: 20% !important;
opacity: 0.90;
}
#content-container div#left {
margin-left: -26% !important;
  width: 240px;
  margin-top: -680px!important;
  border-right: 10px solid #0b0b0b !important;
}

.forumbg ul.topiclist {
background-image: none !important;
background-color: #0b0b0b;
}

.row dd.lastpost span {
  background-color: #0b0b0b;
}

div.forabg dd.dterm div.table-title {
  font-size: 30px;
  color: #333333;
  font-family: Engagement;
}

/*Buscar*/
#search-box {
visibility: hidden;
}
ul.forums dd, ul.topiclist dd , li.row {border: 0px;}
.forabg {background: transparent; border: 0px; }
/** MARCELLE/LOVATIC COPYRIGHT**/

/*Legenda*/
p em b a.gensmall {
color: transparent;
font-size: 20px !important;
font-family: satisfy;
text-align: center;
text-transform: Capitalize;
position: center;
text-shadow: 1px 0px 0px #000;
  -htm-transform: all;
  -htm-transition:1s;
  -moz-transform: all;
  -moz-transition:1s;
  -o-transform: all;
  -o-transition:1s;
  -webkit-transform:all;
  -webkit-transition:1s;
  transform: all;
  transition:1s;
}

p em {
background-color: #0b0b0b;
color: transparent;
display: block;
font-size: 20px;
font-style: normal;
margin-left: 0px;
padding: 20px;
  padding-left: -10px;
line-height: 30px;
position: relative;
text-align: center;
width: 800px;
}

#wrap {
  background-color: #000000;
  border: solid 30px #00011c;
  margin: -20px auto;
  padding: 5px !important;
min-width: 935px !important;
max-width: 700px !important;
font-size: 10px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #COLOR;
padding-top: 100px;
padding-bottom: 20px;
}
::-webkit-scrollbar {width: 8px;height: 13px;background-color:#000000 ;}
::-webkit-scrollbar-thumb{background-color: #0b0b0b;} 
.forabg {
border-top-left-radius: 0px 0px;
border-top-right-radius: 0px 0px;
border-bottom-left-radius: 0px 0px;
  }
/**Título dos Fóruns*/
a.forumtitle {
    border-bottom: 6px groove #333333;
  border-radius: 30px 0px 30px 0px;
  height: 17px;
  padding: 10px;
    color: #333333;
    display: block;
    font-family: Redressed;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 12px;
    margin: 0;
    opacity: 0.7;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
a.forumtitle:hover {
    color: #0b0b0b;
    opacity: 1;
    text-decoration: none;
}

/************LEGENDAS*********/

#main-content em{
  font-size:0px
}
#main-content em::before{
  content:'Legenda: ';
  font-size:25px;
  font-style:normal;
  opacity: 0.0;
}
#main-content em b *{
  font-size:30px;
  font-style:normal;
  font-align:center;
  font-family:Wire One;
}
#main-content em b *::hover{
  font-size:30px;
  font-style:normal;
  font-align:center;
  font-family: Wire One;
  text-transform: uppercase;
}
#main-content em b a::before{
  content:' • ';color:black
}
#main-content em b:first-child a::before{
  content:''
}
#main-content em,
#main-content em *:link{
  cursor:default;
  color:inherit
}

/************FIM DAS LEGENDAS*********/
/**Categorias**/
 
.table-title h2 {
color: #666666 !important;
  text-shadow: 1px 1px 1px #000000;
font-family: Redressed;
font-size: 10px !important;
letter-spacing: 4px;
font-style: normal;
text-transform: none;
}
 
.forabg li.header {
  font-family: Wire One;
  background-image: url('http://i39.servimg.com/u/f39/18/82/38/66/fundo10.png');
  letter-spacing: 2;
  padding-left: none;
  text-align: center;
  text-shadow: none;
  text-transform: none;
}
 
ul.forums {
background-color: transparent;
  font-family: Redressed;
    font-size: 14px;
    margin-top:-0px;
background-repeat: repeat-yes;
border-radius: 0px 0px 0px 0px;
border-bottom: 8px solid transparent;
  box-shadow:0px 2px 8px #000000;
}
li.header dl.icon {
height: 42px;
  background-color: transparent;
  border-bottom: 0px dotted #570C0C;
  background-repeat:repeat;
font-family: Alex Brush !important;
letter-spacing: 2px;
padding: 10px 6px 0px;
font-size: 10px !important;
text-align: center;
text-shadow: 0 2px 2px black;
text-transform: uppercase;
vertical-align: middle;
}
 
/*dentro dos foruns*/
dl.icon dd.dterm, dl.icon dt {
    background-position: 5px 50%;
    background-repeat: no-repeat;
  margin-left: 85px;
}
/*TOPICOS*/
a.topictitle {
    width: 280px;
    border-bottom: 6px groove #0B0B0B;
    height: 17px;
    padding: 10px;
    color: #333333;
    display: block;
    font-family: Redressed;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 12px;
    margin: 0;
    opacity: 0.7;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #0b0b0b;
}
 
a.topictitle:hover {
    width: 280px;
    height: 17px;
    padding: 10px;
    color: #000000;
    display: block;
    font-family: Redressed;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 12px;
    margin: 0;
    opacity: 0.7;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #333333;
}
 
 /*ASPECTO DOS USUARIOS*/
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
font-weight: bold;
font-size: 20px;
font-family: Redressed;
text-decoration: none;
letter-spacing: -2px;
}

.postprofile {
background: url('http://2img.net/i/fa/empty.gif');
border: 6 solid #333333;
  border-bottom: 6 solid #333333;
text-align:center;
  background-color: #0b0b0b;
 width: 220px!important;
}
/*color de fondo a los autores de un post*/
p.author {
background-color: #00000;
border-radius: 0px 0px 0px 0px;
margin-top: 20px;
padding: 3px !important;
position: relative;
right: -7em;
text-align: center;
text-shadow: 1px 1px 0 #COLOR;
}

p.author {
font-family: Orbitron;
font-size: 14px;
line-height: 1.2em;
margin: 0 15em 0.6em 0;
padding: 0 0 5px;
}


/**MENU*/
 
a.mainmenu {
padding: 5px;
margin-top: 30px!important;
margin-right: 2px !important;
font-family: Wire One;
font-size: 18px;
color: #ffffff;
letter-spacing: 1px;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition-duration: 1s;
  background-color: #00011c
}
a.mainmenu:hover {
text-transform: none;
letter-spacing: 5px;
color: #f4e000;
}
 
/*fazer desaparecer as publicidades*/
#main .module-advert {
visibility: hidden !important;
position: absolute;
top: -10000000px;
}
 
#left .module-advert {
visibility: hidden !important;
position: absolute;
top: -10000000px;
}

/* Bordas em volta das zonas de digitos */
#text_editor_textarea {
    background: url("http://2img.net/i/fa/empty.gif") repeat scroll 0 0 transparent;
    border: 8px double #152640;
}
.inputbox {
    border-bottom: 2px solid #152640;
        border-top: 2px solid #152640;
    border-left: 2px solid #152640;
        border-right: 2px solid #152640;
  background-color: #263d33;
    box-shadow: 1px 1px 3px #000000;
    font-size: 12px;
  text-color: white;
  color: white;
}
 

 
/*estatisticas*/
.h3, h3 {
  background-color: transparent;
    border-bottom: 20px solid #0b0b0b;
    color:#0b0b0b;
    font-family: Redressed;
    text-align: left;
    font-size: 29px;
    letter-spacing: 2px;
    padding-top: 25px;
    text-align: left;
    text-transform: none;
    width: center;
  margin-left: -5px;
}
 

#page-footer {
background-image:none;
background-position: bottom;
background-repeat: no-repeat;
padding-bottom: 90px;
}
/*Chatbox*/
#chatbox_header {
background-color:#333333;
  border-bottom: 5px solid #333333;
}

body.chatbox {
  background-color:#000000;
  }

.chatbox-title {
font-size:30px;
letter-spacing:-1px;
  color: #00170D ;
font-family:Damion;
font-style:uppercase;
font-weight:normal;
}

#chatbox_footer {
background-color: #333333;
  }

/*
.cajon {
width: 600px;
height: 260px;
overflow: hidden;
}


/*noticias*/

.updates {
background: #370707;
height:50px;
width: 200px;
font: 28px Berkshire Swash;
padding:20px;
color: #640d0d;
transform:rotate(270deg);
-ms-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
margin-top: 80px;
margin-bottom:70px;
text-align:center;
margin-left: -60px;
}

.updates2 {
font: 11px helvetica;
}

.noticias {
background: transparent;
width: 470px;
height:230px;
color: #7a7a7a;
font: 11px Helvetica;
text-align: justify;
margin-top:10px;
margin-left: -78px;
padding: 5px;
overflow-y:auto;
}

.noticiastitulo {
font: 14px Berkshire Swash;
color: #4d0a0a;
padding:2px 0px 0px 0px;
border-bottom: 1px dotted #000;
width:100%;
}

/*enlaces*/
.titulouno {
text-align: justify;
background: transparent;
font-family: Berkshire Swash;
font-size:13px;
padding: 8px 20px 2px 8px;
width: 270px;
border-bottom: 4px solid #4d0a0a;
color: #263d33;
margin-top:2px;
margin-bottom:2px;
}

.cajauno {
width:180px;
margin-left:10px;
border-left: 10px solid #370707;
padding:5px;
margin-top:0.5px;
margin-bottom:0.5px;
line-height:90%;
-webkit-transition:2s;
-o-transition:2s;
-moz-transition:2s;
}

.cajauno:hover {
padding-left: 30px;
-webkit-transition:1s;
-o-transition:1s;
-moz-transition:1s;
}

.cajauno a:link, .cajauno a:visited, .cajauno a:active {
font-size:11.6px;
color: #000;
}
.cajauno:hover a:link, .cajauno:hover a:visited, .cajauno:hover a:active {
color: #200404;
}

/*administración*/
.cajaadmin {
width: 300px;
padding: 0px 10px;
height: 250px;
overflow-y: auto;
margin: 0 auto;
}

.botonadmin {
margin-bottom: 2px;
height: 83px;
}

/*premios*/
.ganadores {
width:190px;
padding:5px;
color: #370707;
background: #4d0a0a;
text-align: center;
font-size: 12px;
}
/**MARCELLE/LOVATIC COPYRIGHT**/

 .selectCode { float:right; text-transform: uppercase; cursor:pointer; }

/*widgets*/
#content-container div#left {
  background-color: #232124;
  border-right:8px solid  #696969  ;
  font-size: 11px;
}
.module .h3 {
visibility:hidden;
}
 
/*separación entre widgets y foro*/
 
#main-content {
margin-left: 10px;
}

/*Widget*/
.module .h3 {
visibility:hidden;
display:none;
}

#content-container div#left {
background-position: center bottom;
background-repeat:no-repeat;
width: 230px;
  margin-top:-470px;
  background-color: transparent;
margin-right: 50px;
}

p em b a.gensmall {
color:transparent;
font-family: Fauna One;
font-size: 12px;
  letter-spacing: 5px;
text-align: center;
text-shadow: 0 0 4px #COLOR;
text-transform: uppercase;
}

/*Circulos de info widgets*/
 
.circulo {
background:#0a0a0a ;
border-radius: 100px;
width: 100px;
height: 100px;
padding:10px;
text-align: jusitfy;
color: #fdf5f7;
font: 11px calibri;
  text-shadow: 3px 3px 3px black;
text-transform : none;
opacity: 0.9;}
 
/*staff*/
 
        .staff {
        opacity: 0;
        text-align: justify;
        width: 240;
        height: 120px;
  box-align: center;
        }
        .staff:hover {
    background-color: #1D1F1E;
  color: #FFF;
  height: 120px;
    opacity: 0.9;
    overflow: auto;
    text-align: justify;
    transition: all 1s linear 0s;
    width: 240px;
  box-align: center;
}
 

/*botones de afiliados élite*/
a.elite img {
  border:3px solid #1F1D14;
  opacity:0.6;
  -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/*Links de los widgets*/
 
.links {
background:#0a0a0a ;
padding:5px;
border-left: 10px solid #696969;
border-right: 10px solid #696969;
margin-bottom: 2px;
margin-left: -10px;
  width:210px;
 
}
 
.links a:active, .links a:link, .links a:visited, .links dt.author a {
 font-family:calibri;
    text-shadow: 3px 3px 3px black;
  text-transform:uppercase;}
 
.links:hover {
border-left: 15px solid #696969;
-webkit-transition:0.5s;
-o-transition:0.5s;
-moz-transitio:0.5s;
}
/*
#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post {height: auto!important;}
.post {width: 900px;}

----------------------

/************FONTES****************/
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v1/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  src: local('Alex Brush'), local('AlexBrush-Regular'), url(http://themes.googleusercontent.com/static/fonts/alexbrush/v3/IdwaSrUcr-IskDo5YUNTVRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Redressed';
  font-style: normal;
  font-weight: 400;
  src: local('Redressed'), url(http://themes.googleusercontent.com/static/fonts/redressed/v3/2HBwg79Pvh9RNLO_3g_yUj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Wire One';
  font-style: normal;
  font-weight: 400;
  src: local('Wire One'), local('WireOne'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
 
@font-face {
  font-family: 'Engagement';
  font-style: normal;
  font-weight: 400;
  src: local('Engagement'), local('Engagement-Regular'), url(http://themes.googleusercontent.com/static/fonts/engagement/v2/IYnYh0uOiuydvYrbHKIjwRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
 
@font-face {
    font-family: "Playball";
    font-style: normal;
    font-weight: 400;
    src: local("Playball"), local("Playball-Regular"), url("http://themes.googleusercontent.com/static/fonts/playball/v3/QS5qjU-Gc2sqWEq5kDfWQfesZW2xOQ-xsNqO47m55DA.woff") format("woff");
}

@font-face {
  font-family: 'Damion';
  font-style: normal;
  font-weight: 400;
  src: local('Damion'), url(http://themes.googleusercontent.com/static/fonts/damion/v3/qyDz-al48wZmmi6RcQn1Mg.woff) format('woff');
}
 

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
 
@font-face {
  font-family: 'Aguafina Script';
  font-style: normal;
  font-weight: 400;
  src: local('Aguafina Script Regular'), local('AguafinaScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/aguafinascript/v2/65g7cgMtMGnNlNyq_Z6CvDVi_4UGEKHjyEZCTqR5Ysg.woff) format('woff');
}
 
@font-face { font-family: "sueellen"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
 
@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco'), local('Flamenco-Regular'), url(http://themes.googleusercontent.com/static/fonts/flamenco/v3/Ih-SipknQN9xiiZItSGWE_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
 
@font-face {
font-family: 'Amarante';
font-style: normal;
font-weight: 400;
src: local('Amarante Regular'), local('Amarante-Regular'), url(http://themes.googleusercontent.com/static/fonts/amarante/v1/5dF-vhm2PDTNvpxu3h5td_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
 

@font-face {
font-family: 'Fauna One';
font-style: normal;
font-weight: 400;
src: local('Fauna One'), local('FaunaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/faunaone/v1/cSd7NBXNFQWK4oX1706dYz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
 
@font-face {
font-family: 'Finger Paint';
font-style: normal;
font-weight: 400;
src: local('Finger Paint'), local('FingerPaint-Regular'), url(http://themes.googleusercontent.com/static/fonts/fingerpaint/v1/m_ZRbiY-aPb13R3DWPBGX3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
 
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron-Light'), local('Orbitron-Regular'), url(http://themes.googleusercontent.com/static/fonts/orbitron/v3/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
 
@font-face {
  font-family: 'Just Me Again Down Here';
  font-style: normal;
  font-weight: 400;
  src: local('Just Me Again Down Here'), local('JustMeAgainDownHere'), url(http://themes.googleusercontent.com/static/fonts/justmeagaindownhere/v5/sN06iTc9ITubLTgXoG-kc4M0m1RcppnZ3Z3GZDDNlQw.woff) format('woff');
}

#desc {
 width: 450px;
 height: 203px;
 border-top: 20px solid #0b0b0b;
 border-bottom: 20px solid #0b0b0b;
}

#menudesc {
  width: 150px;
  height: 20px;
  color: white;
  background-color: #0b0b0b;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-family: Wire One;
  letter-spacing: 2px;
  opacity: 0.65;
}

#menudesc2 {
  width: 150px;
  height: 20px;
  margin-top: -16px;
  transition:ease-in-out 0.1s;
  -webkit-transition:ease-in-out 0.1s;
  -ms-transition:ease-in-out 0.1s;
  -moz-transition:ease-in-out 0.1s;
  -webkit-transform: scale(1); 
  -ms-transform: scale(1); 
  -o-transform: scale(1); 
  transform: scale(1);
  background-color: black;
  color: #333333;
  text-align: center;
  font-family: Wire One;
  font-size: 14px;
  text-transform: uppercase;
  opacity: 0.5;
}

#menudesc:hover #menudesc2 {
  -webkit-transform: scale(1); 
  -ms-transform: scale(1); 
  -o-transform: scale(1); 
  transform: scale(1);
  opacity:1;
}

Código:

#page-header .navbar {
    background-color: #09C;
    position: relative;
    left: -10px;
    top: -35px;
    width: 100%;
    border-bottom: 10px solid #1C1C1C;
    padding-bottom: 5px;
    padding-top: 5px;
}
a.mainmenu {
    padding: 5px;
    margin-top: 30px !important;
    margin-right: 2px !important;
    font-family: Wire One;
    font-size: 18px;
    color: #FFF;
    letter-spacing: 1px;
    transition: all 0.6s ease-in-out 0s;
}
a.mainmenu:hover {
    text-transform: none;
    letter-spacing: 5px;
    color: #F4E000;
}