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

下拉菜单的实现，纯CSS实现下拉菜单 与 使用JS实现下拉菜单

2016-09-20 19:20 531 查看 

 我们经常会在网页中嵌入下拉菜单，下面分享一下下拉菜单的简单实现，当然我分享的内容只是简单的实现了基本功能，并不具有优雅的外观样式（仅提供功能实现思想），希望对有些朋友有帮助。（1）纯css实现下拉菜单
<html><head><style type="text/css">li, ul{ list-style:none; }a{ text-decoration:none; }#box{ text-align:center; width:200px; }#list{ display:none; }#title:hover + ul{ display:block; }</style></head><body><ul id="box"><a href="#" id="title">The List</a><ul id="list"><li><a href="#">list1</a></li><li><a href="#">list2</a></li><li><a href="#">list3</a></li><li><a href="#">list4</a></li></ul></ul></body></html>
（2）使用js实现下拉菜单
<html><head></head><title>JavaScript下拉菜单</title><style type="text/css">a{ text-decoration:none; background-color:#00CC99; border:1px solid #fff;}li{ width:200px; }#list{ display:none; }li, ul{ list-style:none; }</style><script type="text/javascript">window.onload=function(){var title=document.getElementById("title");var list=document.getElementById("list");title.onmouseover=function(){list.style.display="block";}title.onmouseout=function(){list.style.display="none";}}</script></head><body><ul id=""><a href="#" id="title">The List</a><ul id="list"><li><a href="#">list1</a></li><li><a href="#">list2</a></li><li><a href="#">list3</a></li><li><a href="#">list4</a></li></ul></ul></body></html>
代码写的粗劣，见谅嘞~  在下也是小菜鸟一枚。
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                JavaScript
                                                css
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航