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 it's being hidden under something.
Any suggestions?
It's working fine here
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...