Поисковик не работает

Я хотел бы реализовать панель, в которой главное меню находится слева, а окно поиска - справа. Мои коды:

  <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:

#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;}

ПРОБЛЕМА: Мое окно поиска не работает. Он отображается на странице, но не может щелкнуть по нему и ввести его, как будто он скрыт под чем-то.

Какие-либо предложения?


person user864600    schedule 27.07.2011    source источник


Ответы (1)


Здесь работает нормально

http://jsfiddle.net/XFse7/

Должен быть какой-то CSS, прежде чем это вызовет проблему. Я думаю, что это в вашем меню, если это не работает на вашей стороне. И обратите внимание, что z-index работает только с позиционируемым тегом.

положение: абсолютное, относительное, фиксированное и т. д.

person Warface    schedule 27.07.2011
comment
Спасибо ребята исправили. CSS проблема. - person user864600; 29.07.2011