Question

我想实现左侧主菜单和右侧搜索框的栏。我的代码是：

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

问题：我的搜索框无效。它显示在页面上但不能单击它并键入它，就好像它被隐藏在某些东西下一样。

有什么建议吗？

Answer 1

这里工作正常

http://jsfiddle.net/XFse7/

在导致问题之前必须是一些CSS。如果它不适合您，我认为它在您的菜单下。请注意，z-index仅适用于定位标记

位置：绝对，相对，固定等......

Searchbox无法正常工作

1 个答案: