full category list in magento

            <?php
            $cats = Mage::getModel('catalog/category')->load(2)->getChildren(); // 2 is default category id
            $catIds = explode(',',$cats);
            ?>
<ul id="nav_vert">
<?php foreach($catIds as $catId): ?>
<li class="" onmouseout="Element.removeClassName(this, 'over') " onmouseover="Element.addClassName(this, 'over') ">
<?php
$category = Mage::getModel('catalog/category')->load($catId);
echo '<a href="'.$category->getUrl().'"><span>' . $this->htmlEscape($category->getName()) . '</span></a>';
$subCats = Mage::getModel('catalog/category')->load($category->getId())->getChildren();
$subCatIds = explode(',',$subCats);
?>
<?php if(count($subCatIds) > 1):?>
<ul>
<?php foreach($subCatIds as $subCat) :?>
<li onmouseout="Element.removeClassName(this, 'over')" onmouseover="Element.addClassName(this, 'over')">
<?php
$category1 = Mage::getModel('catalog/category')->load($subCat);
echo '<a href="'.$category->getUrl().'"><span>' . $this->htmlEscape($category1->getName()) . '</span></a>';
$subCats1 = Mage::getModel('catalog/category')->load($category1->getId())->getChildren();
$subCatIds_1 = explode(',',$subCats1);
?>
<?php if(count($subCatIds_1) > 1):?>
<ul>
<?php foreach($subCatIds_1 as $subCat1) :?>
<li onmouseout="Element.removeClassName(this, 'over') " onmouseover="Element.addClassName(this, 'over')">
<?php
$subCategory1 = Mage::getModel('catalog/category')->load($subCat1);
echo '<a href="'.$subCategory1->getUrl().'"><span>' . $this->htmlEscape($subCategory1->getName()) . '</span></a>';
?>
</li>
<?php endforeach;?>
</ul>
<?php endif; ?>

<?php
/*$subCategory = Mage::getModel('catalog/category')->load($subCat);
echo '<a href="'.$subCategory->getUrl().'"><span>' . $this->htmlEscape($subCategory->getName()) . '</span></a>';*/
?>
</li>
<?php endforeach;?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>


###########################   CSS #############################################

/**************************   category vertical navigation ************************************/
/**********************************************Vertical Nav ****************************************/

#nav_vert { padding:15px 10px 10px 10px; font-size:1em; z-index:999; display:block; float:left; }

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */

#nav_vert li {
list-style:none;
position:relative;
text-align:left;
}

#nav_vert li.over { z-index:999; }

#nav_vert li.active { z-index:998; } /* to prevent the li separator from showing through on mouseover on li */

#nav_vert a { line-height:1.3em; }

#nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }

/*#nav_vert span { display:block; cursor:pointer; color: #003997; }*/

/************ 1ST LEVEL ***************/

#nav_vert li { float:left; margin-right:1px; width:150px; height:24px; }

#nav_vert li.active a { color:#9E20C9; }

#nav_vert a {
display:block;
color:#003997;
font-size:12px;
background:url(../images/purple-bullet.gif) right center no-repeat;
}

#nav_vert a span { background:url(../images/brown-dottet-line.gif) bottom left repeat-x; display:block; padding-bottom:5px; }

#nav_vert li.over a, #nav_vert a:hover { color:#9E20C9; }
#nav_vert ul li ul li a { color:#003997; }

/************ 1ST LEVEL RESET ************/

#nav_vert ul li, #nav_vert ul li.active { float:none; height:auto; background:none; margin:0; width:169px; }

#nav_vert ul li ul a { color:#003997; }

#nav_vert ul a, #nav_vert ul a:hover {  float:none; padding:0; background:none; }

/************ 2ND LEVEL ***********/

#nav_vert ul li a { font-weight:normal !important; display:block; padding:5px 8px; background:url(../images/purple-bullet.gif) 158px center no-repeat; color:#003997 !important; }
#nav_vert ul li a:hover { font-weight:normal !important; display:block; padding:5px 8px; background:url(../images/purple-bullet.gif) 158px center no-repeat; color:#9E20C9 !important; }

#nav_vert ul {  position: absolute; margin-left:137px; top:0px; left:-10000px; border:1px solid #666666; background-color:#EAE4ED; }
#nav_vert ul li ul {  position: absolute; margin-left:50px; top:0px; left:-10000px; border:1px solid #666666; background-color:#EAE4ED; z-index:999; }

/* Show menu */

#nav_vert li.over ul { left:0; }

#nav_vert li.over ul ul { left:-10000px; }

#nav_vert li.over ul li.over ul { left:100px; }

/*#nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; }*/

/*#nav_vert ul li.last span { background:none; }*/

/************ 3RD+ LEVEL ************/

#nav_vert ul ul { top:5px;}

#nav_vert ul ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul li.over ul { left:40px; }

/* Fix for the IE bug */
#nav_vert iframe { position: absolute; left: -1px; top: 0; z-index: -1; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); }
/*****************    // category vertical navigation             ***************************/