您的位置：首页 > Web前端 > HTML

Html中鼠标悬停显示二级菜单的两种方法

2017-01-20 10:01 471 查看 
<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title></title>


<style type="text/css">


ul{


list-style: none;


float: left;


}


li{


display: none;


}




</style>


<script type="text/javascript">


function disp(){


for(var i = 0; i<3; i++){


document.getElementsByClassName('sss')[i].style.display='block';


}




}


function out(){


for(var i = 0; i<3; i++){


document.getElementsByClassName('sss')[i].style.display='none';


}


}


</script>


</head>


<body>


<ul onmouseover="disp()" onmouseout="out()"> 手机数码


<li class="sss">iPhone</li>


<li class="sss">SAMSUNG</li>


<li class="sss">SAMSUNG</li>


</ul>


</body>


</html>


 

方法二

<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title></title>


<style type="text/css">


li:hover#b{


display: block;


}


#b{


display: none;


}


</style>


</head>


<body>


<ul>


<li>sss


<ul id="b">


<li ></li>


<li ></li>


<li ></li>


<li ></li>


</ul>


</li>


</ul>


</body>


</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航