Custom Made Drop down Menu is not working in Joomla

[mwgi2005]

The following drop down works perfectly fine when I run it just by including the file in joomla index page, OR even I've tried it outside the joomla it works fine, I've made a drop down menu module, but when i apply this style sheet via a module the drop down portion of this stylesheet does'nt work, I really can't sort this out, can please some one help me.

Stylesheet:

#menu
{
background-color:#3f4962;
list-style:none;
/*
width:60px;
height:40px;
*/
position:relative;
margin:0px 5px 0px 0px;
padding:0px;
color:#000;
float:left;

/* border: 1px solid #002232; */
}

#menu li
{
float:left;
display:block;
text-align:left;
position:relative;
/*
padding: 6px 14px 6px 14px;
*/

/*
margin-right:6px;
margin-top:7px;
*/
border: 1px solid #3f4962;

}

#menu li a
{
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
display:block;
text-decoration: none;
border:none;


padding: 8px 12px 8px 10px;
}

#menu li:hover
{
/* padding: 6px 13px 6px 13px; */
background:#ffffff;
border:1px solid #3F4962;

/* Rounded corners */
/*-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;*/
}

#menu li:hover a
{
color:#3f4962;
font-weight:bold;
border:none;
}

#menu li ul.level_1
{
margin:0px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;

/* padding:2px 2px 2px 2px; */
/* padding:10px 5px 10px 5px; */
padding:0;

border:1px solid #3f4962;
border-top:none;

/* width:800px;*/

/* Rounded corners */

/*-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;*/

/* Gradient background */
background:#ffffff;
background: -moz-linear-gradient(top, #ffffff, #dedfe2);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#dedfe2));
}

#menu li:hover ul.level_1
{
left:-1px;
top:auto;
}

#menu li:hover ul.level_1 div
{
float:left;
/* padding:0; */
margin:0;
padding:2px 2px 2px 2px;

width:748px;

/* border:1px solid #0CF; */
}

#menu li:hover ul div li.col_1
{
background:none;
/* line-height:8px; */
display:inline;

float: left;

/*position: relative;
margin-left:1px;
margin-right:1px;
margin-bottom:5px; */

border:none;
/*width:120px;*/
padding:0;
margin:5px 0px 5px 5px;

/* border:1px solid #000000; /* remove this */

}

#menu li:hover ul div li a
{
color:#3f4962;

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
display:block;
text-decoration: none;

border:none;

margin:0;
padding:2px 2px 2px 2px;

/* border:1px solid #0F3; /* remove this */
}

#menu li:hover ul div li ul.level_2
{
display:inline;
float: left;
position: relative;
margin-left: 0px;

border:none;

/* border:1px solid #000000; /* remove this */

}

#menu li:hover ul div li ul li
{
background:none;
/* float:left;*/
float:none;
line-height:18px;

/*padding:0;
margin:0; */

text-align:left;

width:180px;

position:relative;
padding:0;
margin:0;
border:none;

/* border:1px solid #000000; /* remove this */
}

#menu li:hover ul div li ul li a
{
color:#3f4962;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:lighter;
display:block;
text-decoration:none;

border:none;
padding:2px 2px 2px 2px;
}

#menu li:hover ul div li ul li a:hover
{
text-decoration:underline;
}




Apply Manually:

<ul id="menu" class="level_0">
<li>
<a href="#">Boilers</a>

<ul class="level_1">
<div>
<li class="col_1">
<a href="#">Vaillant</a>

<ul class="level_2">
<li><a href="#">Condensing Combination Boilers</a></li>
<li><a href="#">Condensing Conventional Boilers</a></li>
<li><a href="#">Condensing System Boilers</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>

<li class="col_1">
<a href="#">Glow-worm</a>

<ul class="level_2">
<li><a href="#">Glow-worm Condensing Combination</a></li>
<li><a href="#">Glow-worm Condensing Conventional</a></li>
<li><a href="#">Glow-worm Condensing Systems</a></li>
</ul>
</li>


<li class="col_1">
<a href="#">Worcester</a>

<ul class="level_2">
<li><a href="#">Worcester Condensing Combination</a></li>
<li><a href="#">Worcester Condensing Conventional</a></li>
<li><a href="#">Worcester Condensing System</a></li>
</ul>
</li>

<li class="col_1">
<a href="#">Baxi</a>

<ul class="level_2">
<li><a href="#">Baxi Condensing Combination Boilers</a></li>
<li><a href="#">Baxi Condensing Conventional Boilers</a></li>
<li><a href="#">Baxi Condensing System Boilers</a></li>
<li><a href="#">Baxi Accressories</a></li>
</ul>
</li>
</div>

<div>
<li class="col_1">
<a href="#">Vaillant</a>

<ul class="level_2">
<li><a href="#">Condensing Combination Boilers</a></li>
<li><a href="#">Condensing Conventional Boilers</a></li>
<li><a href="#">Condensing System Boilers</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>

<li class="col_1">
<a href="#">Glow-worm</a>

<ul class="level_2">
<li><a href="#">Glow-worm Condensing Combination</a></li>
<li><a href="#">Glow-worm Condensing Conventional</a></li>
<li><a href="#">Glow-worm Condensing Systems</a></li>
</ul>
</li>


<li class="col_1">
<a href="#">Worcester</a>

<ul class="level_2">
<li><a href="#">Worcester Condensing Combination</a></li>
<li><a href="#">Worcester Condensing Conventional</a></li>
<li><a href="#">Worcester Condensing System</a></li>
</ul>
</li>

<li class="col_1">
<a href="#">Baxi</a>

<ul class="level_2">
<li><a href="#">Baxi Condensing Combination Boilers</a></li>
<li><a href="#">Baxi Condensing Conventional Boilers</a></li>
<li><a href="#">Baxi Condensing System Boilers</a></li>
<li><a href="#">Baxi Accressories</a></li>
</ul>
</li>
</div>

</ul>

</li>
</ul>



Joomla Module Funciton:

function getcategorytree($category_array, $parent, $level)
{

$children = false;

if($level === 1)
{
$i = 4;
}

/* Loop start */
foreach($category_array as $Key => $value)
{

/* If start */
if($value['pid'] == $parent)
{
if($children === false)

{
$children = true;

$category_output .= '<ul class="level_'.$level.'"';


if($level === 0)
{
$category_output .= ' id="menu" '; /* .$params->get('tag_id', 'jl_vm_cat').'"'; */
}

$category_output .= '>';


$level++;

}

if($level === 2 && $i === 4)
{
$category_output .= '<div>';
}


$category_output .= '<li ';

if($level === 2)
{
$category_output .= ' class="col_1" ';
}

$category_output .= '>';

$link = JRoute::_('index.php?option=com_virtuemart&amp;pag e=shop.browse&amp;category_id='.$value['id']);

$category_output .=JHTML::link($link, $value['name'],'title="'.$value['name'].'"');

if($level === 2)
{
$i--;
}

$loop++;

$category_output .= self::getcategorytree($category_array, $Key, $level);

if($level === 2)
{
if($i === 0)
{
$category_output .= '</div>';
$i = 4;
}
}

$category_output .='</li>';
}
/* If closed */
}
/* Loop closed */

if ($children === true)
{
$category_output .='</ul>';
}


return $category_output;
}

[Hristo.P]

Hi,

I am afraid I cannot help you only by looking at these sources. Please give me the URL of your website with the menu added to it and I will do my best to provide you with solution to your issue.

[mwgi2005]

I've sent you a private message about the URL and all the details, please check, thank you for helping out.