Databases
StackOverflow2013
Postsdbo
POcannot create a drop down menu - jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcannot create a drop down menu - jquery
    text
    copied!<p>I am trying to make a drop down menu for my website. this is my code:</p> <pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html dir="ltr"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html" charset="utf-8"&gt; &lt;title&gt;Gowemto&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="Website%20style.css"&gt; &lt;link rel="stylesheet" type="text/css" href="styles/home.css"&gt; &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt; &lt;link rel="icon" href="/favicon.ico" type="image/x-icon"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; .menu { -moz-box-shadow:inset 0px 1px 0px 0px #f4cafc; -webkit-box-shadow:inset 0px 1px 0px 0px #f4cafc; box-shadow:inset 0px 1px 0px 0px #f4cafc; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eea1fc), color-stop(1, #d441ee) ); background:-moz-linear-gradient( center top, #eea1fc 5%, #d441ee 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eea1fc', endColorstr='#d441ee'); background-color:#eea1fc; text-indent:0; border:1px solid #dd5df4; display:inline-block; color:#FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; height:20px; line-height:20px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #b63dcc; } .menu:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d441ee), color-stop(1, #eea1fc) ); background:-moz-linear-gradient( center top, #d441ee 5%, #eea1fc 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d441ee', endColorstr='#eea1fc'); background-color:#d441ee; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #b63dcc; color: #FFFFFF; }.menu:active { position:relative; top:1px; color: #FFFFFF;} a.menu:visited {text-shadow:1px 1px 0px #b63dcc; color: #FFFFFF;} #droptwo{background-color:#FFFFFF;border:1px groove #FF00FF; position: absolute; width: 126px; z-index: 100; left: 325px; top: 117px;} ul { list-style:none; padding:0px; margin:0px } ul li { display:inline; float:left; } ul li a { color:#800080; background:#FFFFFF; margin-right:5px; font-weight:bold; font-size:12px; font-family:verdana; text-decoration:none; display:block; width:126px; height:24px; line-height:25px; text-align:center; border: 1px solid #FF00FF; } ul li a:hover { color:#FFFFFF; background:#EE80FF; font-weight:bold; text-decoration:none; display:block; width:126px; text-align:center; border: 1px solid #800080; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="0" width="100%" id="table3" cellspacing="4" cellpadding="0" style="height:945px;margin: 0"&gt; &lt;tr style="height: 65px;"&gt; &lt;td valign="top" colspan="4" id="headtd" style='height: 87px;line-height:28px;'&gt; &lt;script&gt; $(document).ready(function() { $('#droptwo').css({'left':'-1000px'}); }); $("#droptwo").hover( function() { $('#droptwo').css({'left':'325px'}); }, function() { $('#droptwo').css({'left':'-1000px'}); } ); &lt;/script&gt; &lt;img border="0" src="Header.jpg" width="1322" height="80"&gt;&lt;br&gt; &lt;b&gt;&lt;font face="Tempus Sans ITC"&gt;&amp;nbsp;&lt;font color="#800080"&gt;&lt;a href="home.php" class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Home&amp;nbsp;&lt;/a&gt;&amp;nbsp;&amp;nbsp; &lt;a href="profile.php" class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Profile&amp;nbsp;&lt;/a&gt;&amp;nbsp;&amp;nbsp; &lt;a href="topics.php" class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Topics&amp;nbsp;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="inbox.php" class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Inbox&amp;nbsp;&lt;/a&gt;&amp;nbsp; &amp;nbsp;&lt;a href=messenger.php class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Chat&amp;nbsp;&lt;/a&gt;&amp;nbsp; &amp;nbsp;&lt;span id="comfate"&gt;&lt;a href="javascript:void(0);" onmouseover=" $('#droptwo').css({'left':'325px'});" class="menu" style="color:#FFFFFF;"&gt;&amp;nbsp;Account&amp;nbsp;&lt;/a&gt;&lt;/span&gt;&lt;div id="searc" style='position: absolute; width: 220px; height: 27px; z-index: 15; left: 920px; top: 35px;'&gt; &lt;form method="GET" action="search.php"&gt; &lt;input type=text name=srch id=srch placeholder="Search for people or topics.." size="15" maxlength="500"&gt; &lt;input type="submit" value="Go"&gt;&lt;/form&gt;&lt;/div&gt; &lt;div id="droptwo"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="editprofile.php?user=&lt;?php echo $showusername;?&gt;"&gt;Edit profile&lt;/a&gt; &lt;a href="settings.php"&gt;Settings&lt;/a&gt; &lt;a href="help.php"&gt;Help&lt;/a&gt; &lt;a href="logout.php"&gt;Logout&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/font&gt;&lt;/font&gt;&lt;/b&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="2" bgcolor="#FFFFFF" valign="top" id="extras" &gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;?php require "footer.php" ;?&gt; </code></pre> <p>when I hover on account menu in navigation the drop down menu appear. but when I leave the drop down menu it doesnt disappear. whats wrong with my code please help ??</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload