Ok I am having difficulty with this.
I have a regular navigation with ul li a tags. The last li element has another ul li inside it which contains a div and a form. This is all set to display none. Using jquery I have the form show up when you hover over the last element. The problem is that it only fades out when you move all the way down below the form, its as if the form is taking up the width of the content area. but the form has a set width on it (200px). So Im really puzzled.
Does anyone have a working solution for something like this? Here is my code
<ul id="nav" class="sf-menu">
<li><a href="/" class="first"><img src="/img/nav-star.png" width="19" height="20" alt="Home" /></a></li>
<li><a href="/education/">Education</a></li>
<li><a href="/designers/">Designers</a></li>
<li><a href="/diamond-finder/">Diamond Finder</a></li>
<li><a class="last" href="/diamond-deals/">Diamond Deals</a></li>
<li id="appointmentsLi"><a class="last" href="/appointments/">Appointments</a>
<ul style="display:none;" id="aForm">
<li>
<div id="appointment">
<form id="form2" name="form2" method="post" action="">
<p>NAME<span id="fNameEr" class="dNone errorMsg"></span></p>
<input value="" name="fName" id="fName" type="text" class="field" />
<p>EMAIL<span id="fEmailEr" class="dNone errorMsg"></span></p>
<input value="" name="fEmail" id="fEmail" type="text" class="field" />
<p>PHONE<span id="fPhoneEr" class="dNone errorMsg"></span></p>
<input value="" name="fPhone" id="fPhone" type="text" class="field" />
<p>BEST TIME TO REACH YOU</p><span id="fTimeEr" class="dNone errorMsg"></span>
<select name="fTime" class="field-time">
<option selected="selected" value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Any">Any</option>
</select>
<input name="submit" type="submit" class="buttonstyle" value="SUBMIT" />
<span class="dNone" id="loaderImg"><img id="loadImg" src="/img/ajax-loader.gif" /></span>
</form>
</div><!-- appointment -->
</li>
</ul>
