请问这种效果是不是用javascript做出来的?怎么做出来的

发布网友 发布时间：2022-04-26 03:21

我来回答

共2个回答

热心网友 时间：2022-04-26 04:50

这是JavaScript与CSS结合产生的效果。下面是个简单的例子：

<style>
* {margin:0; padding:0}
body {background-color:#ede}
ul {width:100%; background-color:#fff}
li {float:left; POSITION:relative; width:100px; height:30px; line-height:30px; text-align:center; border-right:1px solid #ddd; background-color:#fff}
dl {display:none; POSITION:absolute; width:120px; left:0; top:30px; border:1px solid #ddd; background-color:#fff}
dd {height:30px; border-bottom:1px dotted #ddd}
</style>
<ul>
    <li>
        鼠标移到这
        <dl>
            <dd>看见了吗？</dd>
            <dd>看见了吧？！</dd>
            <dd>肯定看见了！</dd>
        </dl>
    </li>
    <li>
        鼠标移到这
        <dl>
            <dd>看见了吗？</dd>
            <dd>看见了吧？！</dd>
            <dd>肯定看见了！</dd>
        </dl>
    </li>
    <li>
        鼠标移到这
        <dl>
            <dd>看见了吗？</dd>
            <dd>看见了吧？！</dd>
            <dd>肯定看见了！</dd>
        </dl>
    </li>
    <li>
        鼠标移到这
        <dl>
            <dd>看见了吗？</dd>
            <dd>看见了吧？！</dd>
            <dd>肯定看见了！</dd>
        </dl>
    </li>
</ul>
<script>
window.onload=function(){
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=function(){
            this.getElementsByTagName("dl")[0].style.display="block";
        }
        lis[i].onmouseout=function(){
            this.getElementsByTagName("dl")[0].style.display="none";
        }
    }
}
</script>

 原理其实很简单，就是先把那些方框里的子菜单设为隐藏（display:none）的，当把鼠标移到指定的位置（onmouseover）时，就把对应的子菜单显示出来（display:block），鼠标移开后（onmouseout）再设为隐藏的。

热心网友 时间：2022-04-26 06:08

请百度 css下拉菜单 或 js下拉菜单