cannot create a drop down menu - jquery

Question

I am trying to make a drop down menu for my website. this is my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Gowemto</title>
<link rel="stylesheet" type="text/css" href="Website%20style.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.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;
  }

</style>
</head>
<body>
<table border="0" width="100%" id="table3" cellspacing="4" cellpadding="0" style="height:945px;margin: 0">
    <tr style="height: 65px;">
        <td valign="top" colspan="4" id="headtd" style='height: 87px;line-height:28px;'>
        <script>
$(document).ready(function() {
  $('#droptwo').css({'left':'-1000px'});
});

$("#droptwo").hover(
  function() {
    $('#droptwo').css({'left':'325px'});       
  },
  function() {
    $('#droptwo').css({'left':'-1000px'});
  }
);
</script>
<img border="0" src="Header.jpg" width="1322" height="80"><br>
<b><font face="Tempus Sans ITC">&nbsp;<font color="#800080"><a href="home.php" class="menu" style="color:#FFFFFF;">&nbsp;Home&nbsp;</a>&nbsp;&nbsp;
                <a href="profile.php" class="menu" style="color:#FFFFFF;">&nbsp;Profile&nbsp;</a>&nbsp;&nbsp;
                <a href="topics.php" class="menu" style="color:#FFFFFF;">&nbsp;Topics&nbsp;</a>&nbsp;&nbsp;<a href="inbox.php" class="menu" style="color:#FFFFFF;">&nbsp;Inbox&nbsp;</a>&nbsp;
&nbsp;<a href=messenger.php class="menu" style="color:#FFFFFF;">&nbsp;Chat&nbsp;</a>&nbsp;
&nbsp;<span id="comfate"><a href="javascript:void(0);" onmouseover=" $('#droptwo').css({'left':'325px'});" class="menu" style="color:#FFFFFF;">&nbsp;Account&nbsp;</a></span><div id="searc" style='position: absolute; width: 220px; height: 27px; z-index: 15; left: 920px; top: 35px;'>
<form method="GET" action="search.php">
<input type=text name=srch id=srch placeholder="Search for people or topics.." size="15" maxlength="500">
<input type="submit" value="Go"></form></div>
<div id="droptwo">
  <ul>
 <li>
  <a href="editprofile.php?user=<?php echo $showusername;?>">Edit profile</a>
  <a href="settings.php">Settings</a>
  <a href="help.php">Help</a>
  <a href="logout.php">Logout</a>
  </li>
 </ul>
</div>
</font></font></b>
</tr>
            <tr>
                <td rowspan="2" bgcolor="#FFFFFF" valign="top" id="extras" >
                </td>
            </tr>
</table>
<?php require "footer.php" ;?>

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

thank you ! I've already solved the problem. using the onmouseover and onmouseout attributes. — Angel
– Angel, Commented Sep 26, 2013 at 5:53

cssyphus · Accepted Answer · 2013-09-17 22:20:00Z

2

Only your inline jQuery is working, not the jQuery in the <script> code block.

Therefore, modify your anchor tag as follows:

<a href="javascript:void(0);" onmouseover=" $('#droptwo').css({'left':'325px'});"  onmouseout="$('#droptwo').css({'left':'-1000px'});" class="menu" style="color:#FFFFFF;">&nbsp;Account&nbsp;</a>

and it will work.

To make your jQuery code block work, first remove the inline javascript from the anchor tag:

<a href="javascript:void(0);" class="menu" style="color:#FFFFFF;">&nbsp;Account&nbsp;</a>

And then modify your jQuery code block thus:

$(document).ready(function() {

    $('#droptwo').css({'left':'-1000px'});

    $("span > a").hover(
        function() {
            $('#droptwo').css({'left':'325px'});       
        },
        function() {
            $('#droptwo').css({'left':'-1000px'});
        }
    );
}); //END document.ready

edited Sep 17, 2013 at 22:20

answered Sep 17, 2013 at 22:08

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cannot create a drop down menu - jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related