having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using:

    <!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" ;?>

As I hover over the account menu in the navigation, the drop-down menu appears but it doesn't disappear when I leave it. Can someone please help me identify what's wrong with my code?

javascriptjquerycssmenu

Answer №1

Your jQuery implementation is experiencing some issues - specifically, the inline jQuery is functioning while the jQuery within the script block is not executing as expected.

To rectify this problem, you should make adjustments to your anchor tag in the following manner:

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

By making these modifications, your code should start working correctly.

In order to get the jQuery code block to function properly, begin by removing the inline javascript from the anchor tag:

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

Next, adjust your jQuery code block like so:

$(document).ready(function() {

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Yup and Formik not validating checkboxes as expected

I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...

javascriptvalidationmaterial-uiformikyup

What are some strategies for stopping Knex.js from executing a query object upon return from an asynchronous function?

My node.js backend utilizes Knex.js to construct dynamic DB queries based on various inputs. The challenge I'm facing is handling asynchronous processing of certain inputs. When returning a knex query object from an async function or a Promise resolve ...

javascriptnode.jsknex.js

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

htmlcsstwitter-bootstrap

Are HTML/CSS/JavaScript adjustments made after DOM loading taken into consideration in Google search results?

When searching on www.google.com, do the listings display content directly from the original HTML page load or do they also consider any front-end CSS / JavaScript stylings/adaptations? -- In a hypothetical scenario, let's examine the following ques ...

jqueryhtmlcssseosearch-engine

Angular JS - Selecting Directives on the Fly

I'm currently developing an application where users can choose from various widgets using a graphical user interface (GUI). My plan is to integrate these widgets as angular directives. THE CONTROLLER $scope.widgets = ['one', 'two' ...

javascriptangularjsangularjs-directive

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

javascriptjqueryhtml

What is the process for modifying the characteristics of an RMWC Component?

How can I dynamically change the icon attribute in my RMWC Button element when an onClick event occurs? <Button outlined icon={<CircularProgress />} onClick={(e)=> { // e.currentTarget.icon = ''; // console.log(e.c ...

javascriptreactjsmaterial-uimaterial-components-web

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...

javascripthtmlcss

Encountering the error code 'ERR_EMPTY_RESPONSE' while utilizing an AJAX-powered live search feature

My website features a live AJAX search bar that retrieves records from a MySQL database. However, when users repeatedly conduct searches by modifying the search criteria, some web browsers display an error message stating 'ERR_EMPTY_RESPONSE'. ...

javascriptphpjqueryajax

Is there a way to align both a list icon and its contents in the center?

Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...

htmlcss

I want the name of the hospital to be displayed in the dropdown menu with a shortened version of the hospital's name appearing

Check out my code snippet: here import Autocomplete from "@mui/material/Autocomplete"; import TextField from "@mui/material/TextField"; import React, { useState } from "react"; const hospitalList = { docs: [ { _id: ...

javascriptreactjsmaterial-ui

Styling on a device can vary from how it appears on a

Using Ionic2, I have an application with messages. In a browser, the message appears like this: https://i.stack.imgur.com/SyCtM.png However, when running on either an Android or iOS device, it looks different: https://i.stack.imgur.com/i0RdO.png The di ...

htmlcsssassionic2

Error: Jsonp callback not functioning properly on Internet Explorer

I have been using JSONP to retrieve data from an API through AJAX. After testing my code on Firefox and Chrome, it has worked flawlessly in these browsers. The link I am utilizing follows this format: www.placeholder.com/foo/?jsonp=dataCallback Yet, ...

jqueryajaxinternet-explorerjsonp

jQuery modal does not open when dynamic buttons are clicked

I am currently working on a tabbed panel that contains Datatables lists with buttons for editing or removing each row in the tables. The issue I am facing is that only the edit actions button in the first pane works correctly, while the buttons in the othe ...

jquerydatatablesmodal-dialog

KeyBy lodash method stores values in an object using the specified property as keys

There are multiple items stored in an array: "objects": [ { "category": "XXXXX", "item_name": "over_pkg_0", "price": 230 }, { "category": "XXXXX", "item_name": "over_pkg_1", "price": 54 }, ...

javascriptarraysjsonobjectlodash

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Is there a way to connect an angular event and model to an html element that is added through javascript code? To see my code, click here: https://jsfiddle.net/hq7qk48n/13/ <div ng-app> <div ng-controller="MyController"> <input ...

javascriptjqueryhtmlangularjs

Utilize text hyperlinks within the <textarea> element

I am currently using a textarea to post plain text to a MySQL database table. However, I now wish to add hyperlinks within that text. How can I accomplish this without utilizing any editing tools? ...

phpjquery

Obtain Page Parameters within a Nested Next.js Layout using App Router

My Next.js App Router has a nested dynamic page structure using catchall routes configured like this: app/stay/ |__[...category] | |__page.js |__[uid] | |__page.js |__layout.js Within the 'layout.js' file, there is a con ...

javascriptreactjsnext.jsnext.js13

Display a sublist when a list item is clicked

I am receiving a JSON object in my view that looks like this: $scope.mockData = [ { "folder": "folder1", "reports": [{ "name": "report1" }, { "name": "report2" }, { "name": "report3" }] }, { "folder": "folder2", "reports": [{ "name": ...

javascriptangularjsjson