Javascript 无法创建下拉菜单-jquery_Javascript_Jquery_Css_Menu

Javascript 无法创建下拉菜单-jquery

javascript jquery css menu

Javascript 无法创建下拉菜单-jquery,javascript,jquery,css,menu,Javascript,Jquery,Css,Menu,我正在尝试为我的网站制作一个下拉菜单。这是我的代码： <!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"&

我正在尝试为我的网站制作一个下拉菜单。这是我的代码：

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


戈韦姆托
.菜单{
-moz盒阴影：插入0px 1px 0px 0px#f4cafc；
-网络工具包盒阴影：插入0px 1px 0px 0px#f4cafc；
盒影：插入0px 1px 0px 0px#f4cafc；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#eea1fc）、颜色停止（1，#d441ee））；
背景：-莫兹线性梯度（中心顶部，#eea1fc 5%，#d441ee 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#eea1fc'，endColorstr='#d441ee'）；
背景色：#eea1fc；
文本缩进：0；
边框：1px实心#dd5df4；
显示：内联块；
颜色：#FFFFFF；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
字体风格：普通；
高度：20px；
线高：20px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#b63dcc；
}
.菜单：悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#d441ee）、颜色停止（1，#eea1fc））；
背景：-莫兹线性梯度（中心顶部，#d441ee 5%，#eea1fc 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#d441ee'，endColorstr='#eea1fc'）；
背景色：#d441ee；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#b63dcc；
颜色：#FFFFFF；
}.菜单：活动{
位置：相对位置；
顶部：1px；
颜色：#FFFFFF；}
a、 菜单：已访问{文本阴影：1px 1px 0px#b63dcc；
颜色：#FFFFFF；}
#droptwo{背景色：#ffffffff；边框：1px凹槽#FF00FF；位置：绝对；宽度：126px；z索引：100；左：325px；顶部：117px；}
保险商实验室
{
列表样式：无；
填充：0px；
保证金：0px
}
ulli
{
显示：内联；
浮动：左；
}
ullia
{
颜色：#800080；
背景：#FFFFFF；
右边距：5px；
字体大小：粗体；
字体大小：12px；
字体系列：verdana；
文字装饰：无；
显示：块；
宽度：126px；
高度：24px；
线高：25px；
文本对齐：居中；
边框：1px实心#FF00FF；
}
悬停
{
颜色：#FFFFFF；
背景：#EE80FF；
字体大小：粗体；
文字装饰：无；
显示：块；
宽度：126px；
文本对齐：居中；
边框：1px实心#800080；
}
$（文档）.ready（函数（）{
$（'droptwo'）.css（{'left'：'-1000px'}）；
});
$（“#droptwo”）。悬停(
函数（）{
$（'droptwo'）.css（{'left'：'325px'}）；
},
函数（）{
$（'droptwo'）.css（{'left'：'-1000px'}）；
}
);

当我在导航中的帐户菜单上悬停时，会出现下拉菜单。但是当我离开下拉菜单时，它并没有消失。我的代码有什么问题请帮助？？？

只有内联jQuery在工作，而不是

代码块中的jQuery

因此，请按如下方式修改锚定标记：

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

非常感谢。我已经解决了这个问题。使用onmouseover和onmouseout属性。

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

$(document).ready(function() {

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

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