Make a Pop-Out Menu for Profile 2.0
 
Use these codes below to make a 2.0 menu come to life on your page. Scroll over menu above for a live example.

STEP 1 - Add the below code to your 2.0 CSS{ } Box:

.msc {http://www.myspace-compilation.com/PopOutMenu2}
.msc {adjust width/height of menu. adjust white background area or make transparent. change/remove border}
ul.mscPopOutMenu {width:400px; height:200px; background:#ffffff; border:1px solid #000066;}
ul.mscPopOutMenu li {display:inline;}

.msc {match height here with height above. change color/000066 of lines in between each vertical menu}
ul.mscPopOutMenu li a {display:block; height:200px; width:18px; border-right:1px solid #000066; float:left; font-size:11px;}
ul.mscPopOutMenu li a span {display:none; padding:30px; text-align:left;}

.msc {adjust width of how wide you want the menus to pop-out}
ul.mscPopOutMenu li a:hover {width:300px;}
ul.mscPopOutMenu li a:hover span {display:block;}

.msc {change background color of each vertical menu 1-5. you can also change the text color here}
a.msc1 {background-color:#0000FF; color:#ffffff;}
a.msc2 {background-color:#3333FF; color:#ffffff;}
a.msc3 {background-color:#6666FF; color:#ffffff;}
a.msc4 {background-color:#9999FF; color:#ffffff;}
a.msc5 {background-color:#CCCCFF; color:#ffffff;}

STEP 2 - Add the below to the module you want the menu to appear in (like About/Meet/Interests/etc). Replace
sample content with your own.

<ul class="mscPopOutMenu">
<li><a href="#" class="msc1"><span>CONTENT IN FIRST VERTICAL MENU GOES HERE. CONTENT IN FIRST VERTICAL MENU
GOES HERE. CONTENT IN FIRST VERTICAL MENU GOES HERE. CONTENT IN FIRST VERTICAL MENU GOES HERE. CONTENT
IN FIRST VERTICAL MENU GOES HERE.</span></a></li>

<li><a href="#" class="msc2"><span>CONTENT IN SECOND VERTICAL MENU GOES HERE. CONTENT IN SECOND VERTICAL
MENU GOES HERE. CONTENT IN SECOND VERTICAL MENU GOES HERE. CONTENT IN SECOND VERTICAL MENU GOES HERE.
CONTENT IN SECOND VERTICAL MENU GOES HERE.</span></a></li>

<li><a href="#" class="msc3"><span>CONTENT IN THIRD VERTICAL MENU GOES HERE. CONTENT IN THIRD VERTICAL MENU
GOES HERE. CONTENT IN THIRD VERTICAL MENU GOES HERE. CONTENT IN THIRD VERTICAL MENU GOES HERE. CONTENT
IN THIRD VERTICAL MENU GOES HERE.</span></a></li>

<li><a href="#" class="msc4"><span>CONTENT IN FOURTH VERTICAL MENU GOES HERE. CONTENT IN FOURTH VERTICAL
MENU GOES HERE. CONTENT IN FOURTH VERTICAL MENU GOES HERE. CONTENT IN FOURTH VERTICAL MENU GOES HERE.
CONTENT IN FOURTH VERTICAL MENU GOES HERE.</span></a></li>

<li><a href="#" class="msc5"><span>CONTENT IN FIFTH VERTICAL MENU GOES HERE. CONTENT IN FIFTH VERTICAL MENU
GOES HERE. CONTENT IN FIFTH VERTICAL MENU GOES HERE. CONTENT IN FIFTH VERTICAL MENU GOES HERE. CONTENT
IN FIFTH VERTICAL MENU GOES HERE.</span></a></li>

If you have any questions/comments about this tutorial above please ASK HERE.