Left Menu - Nav Bar with Pull down Menu's

[atp123]

Good Morning,

Im am trying to alter the left-hand navigation on my website. I have some programming knowledge, mainly HTML and CSS and have just started learning pHp. So please bare with my lack of knowledge.

What I want to acheive is when I mouse over The category in the menu, a pullout menu appear on the right with the sub categories. (Like the pictures below, obviously ive just copied the main category names over but hopefully it demonstrates the idea.).

   

The left menu is currently loaded by this code in the file   "left.phtml"

/**
 * Category left navigation
 *
 * @see Mage_Catalog_Block_Navigation
 */


if (!Mage::registry('current_category')) {
	//no current category selected so default to showing the Products category
	$cur_category=Mage::getModel('catalog/category')->load(51);
	$layer = Mage::getSingleton('catalog/layer');
	$layer->setCurrentCategory($cur_category);
}else{
	//current category selected so display the child categories for it
	$layer = Mage::getSingleton('catalog/layer');
	$_category = $layer->getCurrentCategory();
	$currentCategoryId= $_category->getId();
	
	if($currentCategoryId == 306){
		//best sellers is selected so show the Product category
		$cur_category=Mage::getModel('catalog/category')->load(51);
		$layer = Mage::getSingleton('catalog/layer');
		$layer->setCurrentCategory($cur_category);
	}
}

$_categories=$this->getCurrentChildCategories();
$_count = is_array($_categories)?count($_categories):$_categories->count();
if($_count):
?>
<div class="box layered-nav">
    <div class="head">
        <h3><?php echo $this->__('Browse By') ?> PRODUCT CATEGORY</h3>
    </div>
    <div class="border-creator">
        <div class="narrow-by">
            <dl id="narrow-by-list">
                <dd>
                    <ol>
                    <?php foreach ($_categories as $_category): ?>
                        <?php if($_category->getIsActive()): ?>
                        <li>                        
                            <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="active"<?php endif ?>><?php echo $this->htmlEscape($_category->getName()) ?></a>
                        **LOAD CHILD CATEGORIES IN HERE**
                        </li>
                        <?php endif; ?>
                    <?php endforeach ?>
                    </ol>
                </dd>
            </dl><script type="text/javascript">decorateDataList('narrow-by-list')</script>
        </div>
    </div>
</div>
<?php
endif; 
?>
<!-- [ends] .browse-by // -->

What i think I need to do...
1) Need code to load child categoies where i have typed **LOAD CHILD CATEGORIES IN HERE**

2)Hide Child Categories with display: none (DONE)
3)Reveal Categories on hover (DONE)

4)Use CSS to relocate Child Categories to the right so they appear as drop down.

So i think all I need it the code the load the child categories where I stated if thats possible. Does this sound about right? I apreciate anyt time spent looking at this
Many Thanks.

[atp123]

Added more info that I found out was irrelevant - ignore this one

[theMageComp]

Hi @atp123

You can do this thing either by coding or using CSS.
For using coding what i suggest you is, modify this file according to your requirement, not using the same structure as you define into the file.
Change the coding that shows the Main category list with this load sub category.
You can do this by using Magento category level filter.