# CSS - Javascript Menus Problem

**URL:** https://forum.kirupa.com/t/css-javascript-menus-problem/276745
**Category:** web dev
**Created:** [December 3, 2008, 7:23am UTC](https://forum.kirupa.com/t/css-javascript-menus-problem/276745 "2008-12-03T07:23:38Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![prateektiwari](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@prateektiwari](https://forum.kirupa.com/u/prateektiwari)
#### Post date: [December 3, 2008, 7:23am UTC](https://forum.kirupa.com/t/css-javascript-menus-problem/276745/1 "2008-12-03T07:23:38Z")

</div>

Hi,  
I create a Left hand navigation menus using CSS & Javascript  
In this menu, whenever you hover your mouse on gray tabs it will expand.  
I want the same effect on inner items of a particular gray tab.  
Please help me for the same. Its really very urgent for me.

## here is the entire HTML code including CSS & Java script

\<html xmlns=“[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)” \>  
\<head runat=“server”\>  
\<title\>JSRollover\</title\>  
\<script language=“javascript” src=“Javascripts/dropdown.js”\>\</script\>  
\<style type=“text/css”\>

body{  
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /\* Font to use \*/  
margin:0px;

}

.dhtmlgoodies\_question{ /\* Styling question _/  
/_ Start layout CSS \*/  
color:#FFF;  
font-size:0.9em;  
background-color:#A5A5A5;  
width:170px;  
margin-bottom:2px;  
margin-top:2px;  
padding-left:2px;

```
background-repeat:no-repeat;
background-position:top right;	
height:20px;

/* End layout CSS */

overflow:hidden;
cursor:pointer;

```

}  
.dhtmlgoodies\_answer{ /\* Parent box of slide down content _/  
/_ Start layout CSS \*/  
/_border:1px solid #317082;_/  
border:0px;  
background-color:#FFFFFF;  
width:170px;

```
/* End layout CSS */

visibility:hidden;
height:0px;
overflow:hidden;
position:relative;

```

}  
.dhtmlgoodies\_answer\_content{ /\* Content that is slided down \*/  
padding:1px;  
font-size:0.9em;   
position:relative;  
}  
\</style\>  
\<script type=“text/javascript”\>  
var dhtmlgoodies\_slideSpeed = 5; // Higher value = faster  
var dhtmlgoodies\_timer = 15; // Lower value = faster

var objectIdToSlideDown = false;  
var dhtmlgoodies\_activeId = false;  
var dhtmlgoodies\_slideInProgress = false;  
function showHideContent(e,inputId)  
{  
if(dhtmlgoodies\_slideInProgress)return;  
dhtmlgoodies\_slideInProgress = true;  
if(!inputId)inputId = this.id;  
inputId = inputId + ‘’;  
var numericId = inputId.replace(/[^0-9]/g,’’);  
var answerDiv = document.getElementById(‘dhtmlgoodies\_a’ + numericId);

```
objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=='none'){		
	if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){			
		objectIdToSlideDown = numericId;
		slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
	}else{
		
		answerDiv.style.display='block';
		answerDiv.style.visibility = 'visible';
		
		slideContent(numericId,dhtmlgoodies_slideSpeed);
	}
}else{
	slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
	dhtmlgoodies_activeId = false;
}	

```

}

function slideContent(inputId,direction)  
{

```
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height&gt;contentObj.offsetHeight){
	height = contentObj.offsetHeight;
	rerunFunction = false;
}
if(height&lt;=1){
	height = 1;
	rerunFunction = false;
}

obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos&gt;0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
	setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
	if(height&lt;=1){
		obj.style.display='none'; 
		if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
			slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
		}else{
			dhtmlgoodies_slideInProgress = false;
		}
	}else{
		dhtmlgoodies_activeId = inputId;
		dhtmlgoodies_slideInProgress = false;
	}
}

```

}  
function initShowHideDivs()  
{  
var divs = document.getElementsByTagName(‘DIV’);  
var divCounter = 1;  
for(var no=0;no\<divs.length;no++){  
if(divs[no].className==‘dhtmlgoodies\_question’){  
divs[no].onmouseover = showHideContent;  
divs[no].id = ‘dhtmlgoodies\_q’+divCounter;  
var answer = divs[no].nextSibling;  
while(answer && answer.tagName!=‘DIV’){  
answer = answer.nextSibling;  
}  
answer.id = ‘dhtmlgoodies\_a’+divCounter;   
contentDiv = answer.getElementsByTagName(‘DIV’)[0];  
contentDiv.style.top = 0 - contentDiv.offsetHeight + ‘px’;   
contentDiv.className=‘dhtmlgoodies\_answer\_content’;  
contentDiv.id = ‘dhtmlgoodies\_ac’ + divCounter;  
answer.style.display=‘none’;  
answer.style.height=‘1px’;  
divCounter++;  
}   
}   
}  
window.onload = initShowHideDivs;  
\</script\>  
\<%–\<script type=“text/javascript”\>  
var dhtmlgoodies\_slideSpeed = 5; // Higher value = faster  
var dhtmlgoodies\_timer = 15; // Lower value = faster

var objectIdToSlideDown = false;  
var dhtmlgoodies\_activeId = false;  
var dhtmlgoodies\_slideInProgress = false;  
function showHideContent(e,inputId)  
{  
if(dhtmlgoodies\_slideInProgress)return;  
dhtmlgoodies\_slideInProgress = true;  
if(!inputId)inputId = this.id;  
inputId = inputId + ‘’;  
var numericId = inputId.replace(/[^0-9]/g,’’);  
var answerDiv = document.getElementById(‘dhtmlgoodies\_a’ + numericId);

```
objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=='none'){		
	if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){			
		objectIdToSlideDown = numericId;
		slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
	}else{
		
		answerDiv.style.display='block';
		answerDiv.style.visibility = 'visible';
		
		slideContent(numericId,dhtmlgoodies_slideSpeed);
	}
}else{
	slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
	dhtmlgoodies_activeId = false;
}	

```

}

function slideContent(inputId,direction)  
{

```
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height&gt;contentObj.offsetHeight){
	height = contentObj.offsetHeight;
	rerunFunction = false;
}
if(height&lt;=1){
	height = 1;
	rerunFunction = false;
}

obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos&gt;0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
	setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
	if(height&lt;=1){
		obj.style.display='none'; 
		if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
			document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
			slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
		}else{
			dhtmlgoodies_slideInProgress = false;
		}
	}else{
		dhtmlgoodies_activeId = inputId;
		dhtmlgoodies_slideInProgress = false;
	}
}

```

}  
function initShowHideDivs()  
{  
var divs = document.getElementsById(‘DIV’);  
var divCounter = 1;  
for(var no=0;no\<divs.length;no++){  
if(divs[no].className==‘dhtmlgoodies\_question’){  
divs[no].onmouseover = showHideContent;  
divs[no].id = ‘dhtmlgoodies\_q’+divCounter;  
var answer = divs[no].nextSibling;  
while(answer && answer.tagName!=‘DIV’){  
answer = answer.nextSibling;  
}  
answer.id = ‘dhtmlgoodies\_a’+divCounter;   
contentDiv = answer.getElementsById(‘DIV1’)[0];  
contentDiv.style.top = 0 - contentDiv.offsetHeight + ‘px’;   
contentDiv.className=‘dhtmlgoodies\_answer\_content’;  
contentDiv.id = ‘dhtmlgoodies\_ac’ + divCounter;  
answer.style.display=‘none’;  
answer.style.height=‘1px’;  
divCounter++;  
}   
}   
}  
window.onload = initShowHideDivs;  
\</script\>–%\>  
\</head\>  
\<body\>  
\<form id=“form1” runat=“server”\>  
\<div\>  
\<div class=“dhtmlgoodies\_question”\>Advance IT Consulting\</div\>  
\<div class=“dhtmlgoodies\_answer”\>  
\<div\>

```
		  &nbsp;Architecture Service&lt;br /&gt;
		  &nbsp;System Integration&lt;br /&gt;
		  &nbsp;Program Management&lt;br /&gt;&lt;/div&gt;
		  Custom Application Development&lt;br /&gt;
		    Staff Augmentation&lt;br /&gt;
		&lt;/div&gt;
		 
&lt;/div&gt;

```

\<div class=“dhtmlgoodies\_question”\>Custom Application Development\</div\>  
\<div class=“dhtmlgoodies\_answer”\>  
\<div\>  
\<ul\>  
\<li\>Architecture Service\</li\>  
\<li\>System Integration\</li\>  
\<li\>Program Management\</li\>  
\<li\>Feasibility Study\</li\>  
\</ul\>  
\</div\>  
\</div\>  
\<div class=“dhtmlgoodies\_question”\>Staff Augmentation\</div\>  
\<div class=“dhtmlgoodies\_answer”\>  
\<div\>  
\<ul\>  
\<li\>Architecture Service\</li\>  
\<li\>System Integration\</li\>  
\<li\>Program Management\</li\>  
\<li\>Feasibility Study\</li\>  
\</ul\>  
\</div\>  
\</div\>

```
&lt;/div&gt;
&lt;/form&gt;

```

## \</body\> \</html\>

Waiting for your positive response…
