hover 下拉菜单

作者:王某人 2018-06-19 258 0
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hover_下拉菜单效果</title>
<style>
* { margin: 0; padding: 0; list-style: none; }
#con { width: 400px; margin: 100px auto; }
#con a { text-decoration: none; color: #fff; width: 100px; height: 30px; line-height: 30px; display: block; background: #ccc; text-align:center; font-size: 12px; }
#con a:hover { background: pink; }
#con ul li { float: left; width: 100px; height: 30px; line-height: 30px; }
#con ul li ul { display:none; }
</style>
</head>
<body>
<div 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>
    </div>
<script>
function myFn(par1,par2){
//var par1 = 'li01'; var par2 = 'ul01';
var myli = document.getElementById(par1);
var myul = document.getElementById(par2);
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>
</body>
</html>

演示效果

yizhuti01.jpg

源码下载 hover_下拉菜单.zip

关键字:

发表评论

最后一篇 没有了,已经是最新文章