HTML+CSS如何实现简单下拉菜单效果

小编给大家分享一下HTML+CSS如何实现简单下拉菜单效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联是一家集网站建设,成安企业网站建设,成安品牌网站建设,网站定制,成安网站建设报价,网络营销,网络优化,成安网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

使用Html+css实现简单的下拉菜单代码非常简单，需要的的朋友参考下吧：

代码：

    
    
    
    
    
    
*{ margin:0px; padding:0px;}    
#nav{ width:600px; height:40px; margin:0 auto;}    
#nav ul{ list-style:none;}    
#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}    
#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}    
#nav ul li a:hover{ color:#FFF; background:#333}    
#nav ul li ul{ position:absolute; display:none;}    
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}    
#nav ul li ul li a{ width:100%;}    
#nav ul li ul li a:hover{ background-color:#06f;}    
#nav ul li:hover ul{ display:block}    
    
    
    
    
    
        
首页
    
        
学习中心    
            
    
                
java
    
                
jQuery
    
                
C++
    
                
C语言
    
            
            
        
    
        
个人中心
    
        
关于我们