js编写的简单下拉列表

最新推荐文章于 2023-01-11 09:21:07 发布

lanxuepiaoling

最新推荐文章于 2023-01-11 09:21:07 发布

阅读量618

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/lanxuepiaoling/article/details/45749777

版权

网页专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML >
<html >
<head>
<meta charset="utf-8" />

<style type="text/css">
*{margin:0;padding:0;border:0;}
   body {
       font-family: arial, 宋体, serif;
       font-size:12px;
       }
   nav{
       width:300px;
       height:40px;
       margin:0 auto;
       position:relative;
       /*border:1px solid #0F0;
       border-radius:20px ;*/
       }
   nav a{
       display: block;
       width: 33.33%px;
       text-align:center;
       }
   nav a:link {
       color:#666; text-decoration:none;
       }
   nav a:visited {
       color:#666;text-decoration:none;
       }
   nav a:hover {
       color:#FFF;text-decoration:none;font-weight:bold; font-size:12px;
       background:#9999CC;}/*淡蓝紫色*/
   nav ul{
       list-style:none;
       line-height:40px;
       }
   nav li{
       width:33.33%;
       float:left;
       background:#C9F;/*淡紫色*/
       }
   nav li ul{
       width:110px;
       list-styel:none;
       line-height:30px;
       text-align:left;
       position:absolute;
       left:0px;
       }
   nav li ul li{
       width: 110px;
       float: left;
       background:#999999;/*灰色*/
   }
   nav li ul a{
       display:block;
       width:80px;
       text-align:left;
       padding-left:30px;
   }
   nav li:hover ul {
       width:110px;
       left: auto;
   }
   nav li ul a:hover {
       color:#F3F3F3;
       text-decoration:none;
       font-weight:normal;
       background:#669999; /*青色*/
}
</style>

<title>无标题文档</title>

</head>

<body>
   <button οnclick="ChangeTitle()"> 点击1 </button><br/>
    <button οnclick="ShowTime()"> 点击2 </button>
    <p id="deom"></p>

   <nav>
        <ul id="menu">
           <li><a href="#" >产品介绍</a>
               <ul>
                   <li><a href="#" _fcksavedurl="#">产品一</a></li>
                   <li><a href="#" _fcksavedurl="#">产品二</a></li>
                    <li><a href="#" _fcksavedurl="#">产品三</a></li>
                   <li><a href="#" _fcksavedurl="#">产品四</a></li>
                 </ul>
           </li>
            <li><a href="#">成功案例</a>
               <ul>
                   <li><a href="#" _fcksavedurl="#">案例一</a></li>
                   <li><a href="#" _fcksavedurl="#">案例二</a></li>
                    <li><a href="#" _fcksavedurl="#">案例三</a></li>
                   <li><a href="#" _fcksavedurl="#">案例四</a></li>
                 </ul>
           </li>
            <li><a href="#">关于我们</a>
               <ul>
                   <li><a href="#" >我们一</a></li>
                   <li><a href="#" _fcksavedurl="#">我们二</a></li>
                    <li><a href="#" _fcksavedurl="#">我们三</a></li>
                   <li><a href="#" _fcksavedurl="#">我们四</a></li>
                 </ul>
           </li>
         </ul>

   </nav>

<script type="text/jscript">
   function ChangeTitle(){
       document.title="动态测试";
   }
   function ShowTime(){
       document.getElementById("deom").innerHTML = Date();
       }

   function menu(){
        var elem=document.getElementById("menu");

        var ul=elem.getElementsByTagName("ul")
        for(var i=0;i<ul.length;i++){
            ul[i].style.display="none";
        }

        //bind the action
        var li=elem.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            li[i].οnmοuseοver=function(){
                var inli=this.getElementsByTagName("ul");
                for(var j=0;j<inli.length;j++){
                        inli[j].style.display="block";
                }
            }
            li[i].οnmοuseοut=function(){
                var inli=this.getElementsByTagName("ul");
                for(var j=0;j<inli.length;j++){
                        inli[j].style.display="none";
                }
            }
        }


    }
    window.οnlοad=menu();
</script>
</body>
</html>

lanxuepiaoling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js编写的简单下拉列表

*{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } nav{ width:300px; height:40px; margin:0 auto;
复制链接

扫一扫