Creating menus within menus - html

Question

I'm working on a website at the minute for a project I am doing. I need to create a dropdown menu within a dropdown menu. It is part of a form. Basically its for damage to a car. In my drop down menu I have options for no damage and damage. When I select damage I need it to bring me to another form where I can select the part of the car and type in the damage. THen it needs to save. I may have worded this badly. If anyone can give me any help thta would be great
Here is what I have at the moment
Damage:<br>
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;"><br>
<input type='textarea' class='text' name='hidden style' value size='20' />
</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script><br><br>
This gives me a text box to enter the damage into. What I would really like is to be able to get another form whcih gives me further options to select from if this is possible
eg right front
rear left

Answer 1

You need to create 3 level of ul
<ul id="menu">
<li><span>Level 1-A</span>
<ul>
<li><span>Level 2-A-1</span>
<ul>
<li><span>Level 3-A-1</span></li>
<li><span>Level 3-A-2</span></li>
<li><span>Level 3-A-3</span></li>
</ul>
</li>
<li><span>Level 2-A-2</span></li>
<li><span>Level 2-A-3</span></li>
<li><span>Level 2-A-4</span></li>
</ul>
</li>
<li><span>Level 1-B</span></li>
<li><span>Level 1-C</span></li>
<li><span>Level 1-D</span></li>
<li><span>Level 1-E</span></li>
Here is an example of nested dropdown menu, hope it helps.
http://jsfiddle.net/Wss5A/