Welcome to WebmasterWorld Guest from 54.145.173.36

Forum Moderators: open

Message Too Old, No Replies

hover over nav makes form appear

hover over nav makes form appear

   
10:39 pm on Aug 24, 2012 (gmt 0)

5+ Year Member



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>
12:18 am on Aug 25, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Where's the code? Also, you could use browser developer tools to inspect and element (with Chrome, for example, right click where the form is showing and choose Inspect Element). This might give you an idea of what styles are applied.