I am attempting to create a form element that looks like a drop-down, but instead is actually a div tag with an image of the down arrow. When you click the down arrow, a list box displays under the div for the user to select from. The reason I'm doing it this way is that I need to have multiple columns of data displayed for the user to select from. That part I have working fine. The issue I am having now is that when I make a selection, the down arrow moves depending on the text selected. I want to have the button to stay in the same place no matter what is in the div tag.
I am sure it is probably something very simple, but since I haven't used CSS in a while, the solution is failing me. My current page is displayed below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=201809
function changeMsg(msg) {
    document.getElementById('expDDmsg').innerHTML = msg;
function dispDD() {
    disp = document.getElementById('expDD').style.display;
    if (disp=="none") {
    } else {
    <form id="form1">
            <td>Add, Modify, or Delete</td>
            <td colspan="2"><div style="border:1px solid #7F9DB9; width:43px;">
        <div id="expDDmsg" style="display:inline" onclick="dispDD()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><img src="down.gif" onmouseup="this.src='down.gif'" onmousedown="this.src='downPress.gif'" onclick="dispDD()" height="16" width="15" />
 <select id="expDD" size="4" style="display:none; position:absolute" onchange="changeMsg(this.value)">
  <option value=""></option>
  <option value="A">A | Add</option>
  <option value="Mod">Mod | Modify</option>
  <option value="Del">Del | Delete</option>
            <td><input type="text" name="name" size="20" /></td>
            <td><input type="text" name="address" size="20" /></td>