js下拉菜单
<!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" xml:lang="en">
<head>
<meta http-equiv="content-Type" content="text/html;charset=UTF-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#con{width:400px;margin:100px auto;}
#con ul li{float:left;width:100px;height:30px;line-height:30px;text-align:center;}
#con a{text-decoration:none;color:#fff;display:block;width:100px;height:30px;background:#ccc;}
#con a:hover{background:pink;}
#con ul ul{display:none;}
</style>
</head>
<body>
<p id="con">
<ul>
<li id="li01">
<a href="JavaScript:;">平面设计</a>
<ul id="ul01">
<li><a href="javascript:;">平面内容</a></li>
<li><a href="javascript:;">平面内容</a></li>
<li><a href="javascript:;">平面内容</a></li>
<li><a href="javascript:;">平面内容</a></li>
</ul>
</li>
<li id="li02">
<a href="javascript:;">网页设计</a>
<ul id="ul02">
<li><a href="javascript:;">网页内容</a></li>
<li><a href="javascript:;">网页内容</a></li>
<li><a href="javascript:;">网页内容</a></li>
<li><a href="javascript:;">网页内容</a></li>
</ul>
</li>
<li id="li03">
<a href="javascript:;">SEO优化</a>
<ul id="ul03">
<li><a href="javascript:;">SEO内容</a></li>
<li><a href="javascript:;">SEO内容</a></li>
<li><a href="javascript:;">SEO内容</a></li>
<li><a href="javascript:;">SEO内容</a></li>
</ul>
</li>
<li id="li04">
<a href="javascript:;">UI设计</a>
<ul id="ul04">
<li><a href="javascript:;">UI内容</a></li>
<li><a href="javascript:;">UI内容</a></li>
<li><a href="javascript:;">UI内容</a></li>
<li><a href="javascript:;">UI内容</a></li>
</ul>
</li>
</ul>
</p>
</body>
</html>
<script type="text/javascript">
function myFn(param1,param2){
var myli = document.getelementbyid(param1);
var myul = document.getElementById(param2);
myli.onmouseover = function(){
myul.style.display = 'block';
}
myli.onmouseout = function(){
myul.style.display = 'none';
}
}
myFn('li01','ul01');
myFn('li02','ul02');
myFn('li03','ul03');
myFn('li04','ul04');
</script>开始页面显示为：
当鼠标移入指定的位置，会在指定的位置下显示被隐藏的菜单
当鼠标移出指定位置，在指定位置会把下拉菜单又隐藏了
相关阅读
js中currentStyle和getComputedStyle获取css样式区别
js中获取样式我了解到三种。一种是通过obj.offsetAttr来获取样式，通过这种方法来获取元素的宽高时，如果没有边框，可以正确获取，如果使
今天，记录一个jsp页面上写一个js，来定时执行。这样性能也许会有问题实现如下：function hello(){ $(".finedo-message").css("top","
1. nodejs下载与安装： （1）nodejs下载链接：https://nodejs.org/zh-cn/download/ 。安装的过程一路next就可以了，安装后将nodejs设置为
系统介绍 一个网站的发展壮大靠的就是众多用户的支持，一个好的网站一定要注意与用户之间信息的交流，及时得到用户反馈信息，并及时改
项目说明本项目是依据《轻量级 Java EE 企业应用实战 第4版》的最后一章中的项目实现的，原本项目使用的框架是Struts2 + Spring 4