Hi all,

I need some help with a search form positioned correctly inside a css menu using <li> element </li>. Here's the code to the css with the search code included:

I have the search form included but I would like it to be aligned to the right of the css navigation, and not have it 'nudge' over when I click inside of it. The page in question is: http://www.reunitemysite.com/main.php

<ul id="nav_blue">
<li class="active"><a href="http://www.reunitemysite.com/iframe.html" target="iframe">Home</a>
<ul>
<li><a href="http://www.reunitemysite.com/about.html" target="iframe">About Us</a></li>
<li><a href="http://www.reunitemysite.com/asolutions.html" target="iframe">Advertising Solutions</a></li>
<li><a href="http://www.reunitemysite.com/psolutions.html" target="iframe">Publishing Solutions</a></li>
<li><a href="http://www.reunitemysite.com/news.php" target="iframe">Company News</a></li>
<li><a href="http://www.reunitemysite.com/services.html" target="iframe">Company Services</a></li>
<li><a href="#" target="_parent">Testimonials</a>
<ul>
<li><a href="http://www.reunitemysite.com/testimonials.php" target="iframe">View Testimonials</a></li>
<li><a href="http://www.reunitemysite.com/scripts/news/index.php" target="iframe">Post Testimonial</a></li>
</ul></li></ul>

<li><a href="#" target="_parent">Advertisement Index</a>
<ul>
<li><a href="http://www.reunitemysite.com/advertisements/premium/banners/index.html" target="iframe">Banner Index</a></li>
<li><a href="http://www.reunitemysite.com/advertisements/premium/buttons/index.html" target="iframe">Button Index</a></li>
</ul></li>

<li><a href="#" target="_parent">Services</a>
<ul>
<li><a href="http://www.reunitemysite.com/buy.php" target="iframe">Buy Ad Space</a></li>
<li><a href="http://www.reunitemysite.com/scripts/amp/advertiser.php" target="_blank">Advertisers Account</a></li>
<li><a href="http://www.reunitemysite.com/scripts/amp/publisher.php" target="_blank">Publishers Account</a></li>
<li><a href="http://www.reunitemysite.com/scripts/links/" target="iframe">Free Text Ads</a>
</li></ul>

<li><a href="#" target="_parent">Help & Support</a>
<ul>
<li><a href="http://www.reunitemysite.com/faqs.html" target="iframe">FAQ's</a></li>
<li><a href="#" target="_parent">Help Advertiser</a></li>
<li><a href="#" target="_parent">Help Webmaster</a></li>
<li><a href="#" target="_parent">Resources</a>
</li></ul>

<li><table width="100%" align="right" cellpadding="5" cellspacing="1" class="searchBox">
<tr>
<td width="100%" align="right">
<form align="right" action="search.php" method="get">
<table width="100%" align="right">
<tr>
<td width="100%" align="right">

<div align="right"> 
<input align="right" type="text" name="query" id="query" size="25" value="reunite" action="include/js_suggest/suggest.php" columns="2" autocomplete="off" delay="1500">	
</div> 

<td width="100%" align="right">
<input align="right" type="submit" value="Search">
</td></tr></table>

<input align="right" type="hidden" name="search" value="1"> 
</form>
</td>

</tr>
</table></li>

</ul>
</li>

Thank you
Brian

It is not the form that "moves" but you have negative left and right margins applied to the anchor elements in the navigation on hover.

Originally Posted by chrishirst

It is not the form that "moves" but you have negative left and right margins applied to the anchor elements in the navigation on hover.

Ah ok, I will check that out. I set the left and right margins to 0 and it still has the same result. I am going to take another look.

Thanks Chris

Still no luck...I put the margins back to negative values as that had no affect.

Did you clear the browser cache after the changes?