Searchbox not working

I'd like to implement bar where main menu is on the left and searchbox is on the right. My codes are:

  <div id="divMenu">
    <div id="menu">
      <ul>
        <li><a href="index.html" class="active"><span>Home</span></a></li>
        <li><a href="#"><span>About Us</span></a></li>
        <li><a href="#"><span>Events/Services</span></a>
          <ul>
            <li><a href="#"><span>submenu1</span></a></li>
            <li><a href="#"><span>submenu2</span></a></li>
            <li><a href="#"><span>submenu3</span></a></li>
          </ul>
        </li>
        <li><a href="#"><span>Ventures</span></a></li>
        <li><a href="#"><span>Testimonials</span></a></li>
        <li><a href="#"><span>Resources</span></a></li>
        <li><a href="#"><span>e-Commerce</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
      </ul>
    </div>
    <div id="search">
      <!--<form id="fmSearch" name="fmSearch" method="post" action="">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><input name="iSearch" type="text" id="iSearch" value="Search..." size="20" maxlength="100" /></td>
            <td><input id="bSearch" name="bSearch" type="image" src="images/search.gif" class="button" /></td>
          </tr>
        </table>
      </form>-->
        <form id="fmSearch" name="fmSearch" method="post" action="">
          <label><span>
            <input id="iSearch" name="iSearch" type="text" class="keywords" maxlength="50" value="Search..." />
            </span>
            <input name="b" type="image" src="images/search.gif" class="button" />
          </label>
        </form>      
    </div>
  </div>

CSS style are:

#divMenu { width:100%; height:30px; background-image:url(../images/bar_menu.jpg); background-repeat:repeat-x; margin:0; padding:0; border-top:1px solid #999;}
#menu { width:75%; margin:0; padding:0; height:30px; position:absolute;}
#menu ul {float:left; margin:0; padding:0; list-style:none; font-size:0.8em;}
#menu ul li {float:left; margin:0; padding:0;}
#menu ul li a {line-height:25px; display: block; color:#fff; padding:2px 10px; text-decoration:none; z-index:500;}
#menu a:hover, #menu ul li a.active {margin:0; /*background-image: url(../images/img_nav.jpg);*/ background-color:#1D1D1D; background-repeat:repeat-x; z-index:510; color:#999;}
#menu ul li ul {display:none; position:absolute; background-color:#333; z-index:520; font-size:1em;}
#menu ul li:hover ul {display:block; z-index:530;}
#search { width:25%; padding:0; margin:0; float:right; height:30px; z-index:999;}
#search form #iSearch { height:16px; z-index:1000;}

PROBLEM: My searchbox is not working. It is displayed on page but cannot click on it and type in it as if 开发者_JAVA技巧it's being hidden under something.

Any suggestions?

It's working fine here

http://jsfiddle.net/XFse7/

Must be some CSS before that causing the problem. I think it's under your menu if it's not working on your side. And note that z-index only works with positioned tag

position: absolute, relative, fixed, etc...