Welcome to WebmasterWorld Guest from

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)

Preferred Member

10+ Year Member

joined:June 19, 2006
posts: 476
votes: 0

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">
<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>

<input name="submit" type="submit" class="buttonstyle" value="SUBMIT" />
<span class="dNone" id="loaderImg"><img id="loadImg" src="/img/ajax-loader.gif" /></span>
</div><!-- appointment -->
12:18 am on Aug 25, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4988
votes: 12

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.