js導航菜單

最新推荐文章于 2024-09-17 13:42:29 发布

jackeyabc

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量1k

点赞数

文章标签： function div xhtml javascript html border

本文链接：https://blog.csdn.net/jackeyabc/article/details/2044545

版权

<%--<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test1.aspx.cs" Inherits="test1" %>
--%>
<!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>

window.οnlοad=function(){
var i,a,s="";
var d=document.getElementsByTagName("DIV");
for(i=0;i<d.length;i++)
{

a=d[i].getElementsByTagName("li");

for(i=0;i<a.length;i++)
{
a[i].οnmοuseοver=function(){show()};
a[i].οnmοuseοut=function(){hidden()};
}
}
}

function show()
{
var d=document.getElementById("div1");
d.style.display="";

d.style.pixelLeft=152;
d.style.pixelTop=event.clientY-30;

}
function hidden()
{
var d=document.getElementById("div1");
d.style.display="none";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導航</title>
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋体", Arial; list-style:none;}
/*简单定义了一下全局*/
a:link,a:visited{background:#FFF3C6 url(jaian.gif) no-repeat 15px 7px; padding-left:23px; color:#000000;text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: underline;background-color: #FED762;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
/*定义链接的样式*/
ul{ background:#ffff; width:150px; border:1px solid #FF6600; margin:0px; padding:1px;}
/*定义了UL*/
span{ display:block;background:#FF9900 url(jai.gif) no-repeat 5px 5px; padding-left:13px;}
</style>
</head>
<body>
<div id="div2">
<ul><span>CLICK</span>
<li ><a href="#" target="_blank">QQ空间</a></li>
<li ><a href="#" target="_blank">动易专区</a></li>
<li><a href="#" target="_blank">SEO优化</a></li>
</ul>
<ul><span>网页特效</span>
<li><a href="#" target="_blank">网页特效</a></li>
<li><a href="#" target="_blank">网页特效</a></li>
<li><a href="#" target="_blank">网页特效</a></li>
</ul>
<ul><span>软件下载</span>
<li><a href="#" target="_blank">软件下载</a></li>
<li><a href="#" target="_blank">软件下载</a></li>
<li><a href="#" target="_blank">软件下载</a></li>
</ul>
</div>
<div id="div1" style="position:absolute;dispaly:none">
 <ul>
<li><a href="http://news.163.com">1</a></li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>