2011-07-27 69 views
0

メインメニューが左側にあり、searchboxが右側にあるバーを実装したいと思います。私のコードは次のとおりです。Searchboxが機能しない

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

問題:私の検索ボックスが機能していません。それはページに表示されますが、何かの下に隠されているかのようにそれをクリックして入力することはできません。

提案がありますか?

答えて

0

ここは細かい作業だということが問題を引き起こして前に

http://jsfiddle.net/XFse7/

は、いくつかのCSSでなければなりません。私はそれがあなたの側で働いていない場合、あなたのメニューの下にあると思う。 ...など、絶対的、相対的、固定の人は、それが固定しまっ

+0

感謝を:そして、それのz-indexが唯一の位置付けタグ

位置で動作します注意してください。 CSS prob。 – user864600