Pop Up Menu Question

[thechad99]

I am trying to create a pop menu within one of the selections of a pop menu. Right now I have:

VSE Home
Nortel.com
Design Site
Global Web

I am trying to create an additonal menu within that to get:

VSE Home
Nortel.com
VSE
Design
Design Site
Global Web

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">VSE Home</a></li>
<li><a href="#" rel="dropmenu2">VSE Releases</a></li>
<li><a href="#" rel="dropmenu3">Cross Release Data</a></li>
<li><a href="#" rel="dropmenu4">VSE Resources</a></li>
<li><a href="#" rel="dropmenu5">Help</a></li>
<td class="pshp"><select class="country" name="select" onChange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="#" selected>Deliverables</option>
<option value="#">VSE01 GPOR</option>
<option value="#">VSE01 PSM</option>
<option value="#">VSE02 GPOR</option>
<option value="#">VSE02 PSM</option>
<option value="#">VSE03 GPOR</option>
<option value="#">VSE03 PSM</option>
<option value="#">E-BMS</option>
</select></td>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="#">Nortel.com</a>
<a href="#">Design Site</a>
<a href="#">Global Web</a>
</div>

I think the chromestyle.css has the code ready for that but I am having some issues making it work.


.chromestyle{
width: 760;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 0px 18px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 160px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

[bubbisthedog]

Why is that <td> in there?

[thechad99]

<td class="pshp"><select class="country" name="select" onChange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="#" selected>Deliverables</option>
<option value="#">VSE01 GPOR</option>
<option value="#">VSE01 PSM</option>
<option value="#">VSE02 GPOR</option>
<option value="#">VSE02 PSM</option>
<option value="#">VSE03 GPOR</option>
<option value="#">VSE03 PSM</option>
<option value="#">E-BMS</option>
</select></td>

[bubbisthedog]

The question was "why." <td> represents a table cell within a table row; that is, <td> immediately follows <tr>.

STRUCTURE:

<table>
<tr>
<td>
content...
</td>
</tr>
</table>

A suggestion: Consider not using tables for layout, and use divs and CSS. Perform a Web search for something to the extent of "div menus" or "div layouts" for help on this.