jquery下拉菜单

最新推荐文章于 2024-07-26 20:46:33 发布

MengxiSky

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.9k

点赞数

分类专栏： Javascript 文章标签： jquery javascript class div function border

本文链接：https://blog.csdn.net/MengxiSky/article/details/2514486

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery下拉菜单

firefox有效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/As.publc.js"> </script>
<title>无标题文档</title>
<style>
/* CSS Document */
body{
width:778px;
margin:auto;
font-size:12px;
font-family:Tahoma,Arial, Helvetica, sans-serif;
}
/*全局导航菜单定义*/
#nav{
  background:url(bgmenu.jpg) top repeat-x;
height:30px;
margin: 0;
}
#nav ul{
margin: 0;
padding: 0;
text-align:center;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}
#nav li{
display: inline;
}
#nav li a{
position:relative;
float: left;width:100px;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
#nav li a:visited{
color: white;
}
#nav li a:hover{
background: black url(blockactive.gif) center center repeat-x;
}
.showmenu_shadow{
background:#e9e8e8;
width:160px;
position:absolute;
z-index:99;
display:none;
text-align:left;
right:0px;
    filter: alpha(opacity=86);
    -moz-opacity: .86;
}
.showmenu_shadow a,
.showmenu_shadow a:link,
.showmenu_shadow a:visited{
  display:block;
padding:2px 0 0 5px;
color:#289312;
font-weight:bold;
border-bottom:1px solid #addc61;
height:22px;
text-decoration:none;
}
.showmenu_shadow a:hover{
color:#cc0000;
background:#FFFFFF;
border-bottom:1px solid #999999;
}
.showmenu_shadow .showmenuBody{/*内容层*/
z-index:100;
border:solid 1px #999;
position:relative;
background:#dff6b3;
margin:0 2px 2px 0;
}
</style>
<script>
//==============================
//下拉菜单用(jquery)
//www.mxisky.com
//
//==============================
function posXY(obj){
//no use
    var hk_left=obj.offsetLeft
    var hk_top=obj.offsetTop
    var vParent = obj.offsetParent;
    while (vParent.tagName.toUpperCase() != "BODY")
    {
  hk_left += vParent.offsetLeft;
  hk_top += vParent.offsetTop;
  vParent = vParent.offsetParent;
       }
      this.PX=hk_left;
   this.PY=hk_top;
   // alert(hk_left);
   // alert(hk_top);
}

<body>
<div id="nav">
<ul>
  <li><a href="{$SiteRoot}">home</a></li>
  <li><a href="{$SiteRoot}products" id="mh1" οnmοuseοver="showmenu('mc1','mh1')" οnmοuseοut="hidemenu('mc1')">Products</a></li>
  <li><a href="javascript:void(0)" id="mh2" οnmοuseοver="showmenu('mc2','mh2')" οnmοuseοut="hidemenu('mc2')">Services</a></li>
  <li><a href="javascript:void(0)" id="mh3" οnmοuseοver="showmenu('mc3','mh3')" οnmοuseοut="hidemenu('mc3')" >About us</a></li>
  <li><a href="javascript:void(0)" id="mh4" οnmοuseοver="showmenu('mc4','mh4')" οnmοuseοut="hidemenu('mc4')">Contact us</a></li>
  <li><a href="{$SiteRoot}news">News</a></li>
</ul>
</div>
<div class="showmenu_shadow" id="mc1" οnmοuseοver="showmenu('mc1')" οnmοuseοut="hidemenu('mc1')">
<div class="showmenuBody">
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=2">PVC Series </a>
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=7">Hollow PP Sheet </a>
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=6">Acrylic Sheet</a>
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=10">Ceramic Tiles</a>
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=11">Artificial Flower</a>
  <a href="{$SiteRoot}products/Pclass.asp?action=list&PCateId=12">Whole Set Equipment</a>
</div>
</div>
<div class="showmenu_shadow" id="mc2" οnmοuseοver="showmenu('mc2')" οnmοuseοut="hidemenu('mc2')">
<div class="showmenuBody">
  <a href="{$SiteRoot}Company/index.asp?part=member">Member Centre</a>
  <a href="javascript:void(0)">Leave Word</a>
  <a href="javascript:void(0)">Order inquiry</a>
</div>
</div>
<div class="showmenu_shadow" id="mc3" οnmοuseοver="showmenu('mc3')" οnmοuseοut="hidemenu('mc3')">
<div class="showmenuBody">
  <a href="{$SiteRoot}Company/index.asp?part=about">Introduction</a>
  <a href="{$SiteRoot}Company/index.asp?part=history">Review The History</a>
  <a href="{$SiteRoot}Company/index.asp?part=cert">Authorized Certificate</a>
  <a href="{$SiteRoot}Company/index.asp?part=honor">Honor & Glory</a>
  <a href="{$SiteRoot}Company/index.asp?part=news">News and Events</a>
</div>
</div>
<div class="showmenu_shadow" id="mc4" οnmοuseοver="showmenu('mc4')" οnmοuseοut="hidemenu('mc4')">
<div class="showmenuBody">
  <a href="{$SiteRoot}Company/index.asp?part=sendemail">Send E-mail</a>
  <a href="{$SiteRoot}Company/index.asp?part=department">Sales Department</a>
</div>
</div>
</body>
</html>

MengxiSky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery下拉菜单

jquery下拉菜单firefox有效果 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题文档/* CSS Document */ body{ width:778px; margin:auto; font-size:12px; font-family:T
复制链接

扫一扫