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

利用CSS实现下拉菜单导航

2011-10-10 15:23 811 查看

      

 

<body>
<div id="outside">
<ul>
<li>
<a href="#">
视频教程
<table>
<tbody>
<tr>
<td>
<div class="inside">
<span>
<a target="_blank" href="#">平面设计</a>
</span>
<span>
<a target="_blank" href="#">编程开发</a>
</span>
<span>
<a target="_blank" href="#">三维动画</a>
</span>
<span>
<a target="_blank" href="#">网页制作</a>
</span>
<span>
<a target="_blank" href="#">Flash动画</a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>

 

下面是css文件：

* {
border: 0 none;
font-family: "宋体","新宋体","仿宋_GB2312","Arial Unicode MS",Arial;
font-size: 12px;
margin: 0;
padding: 0;
}
ul {
list-style: none outside none;
}
li {
float: left;
position: relative;
}
table {
left: 0;
position: absolute;
top: 0;
}
a {
background: url("picture/hd_bg_02.jpg") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: block;
height: 35px;
line-height: 35px;
text-align: center;
text-decoration: none;
width: 150px;
}
a:hover {
background: url("picture/hd_bg_03.jpg") repeat scroll 0 0 transparent;
color: #BD6B09;
}
#outside {
margin: 5px 0;
}
li:hover .inside, a:hover .inside {
background: none repeat scroll 0 0 #CCCCCC;
display: block;
left: -2px;
position: relative;
top: 33px;
}
.inside {
display: none;
}
.inside span a {
background: none repeat scroll 0 0 #CCCCCC;
color: #000000;
}
.inside span a:hover {
background: none repeat scroll 0 0 #3366FF;
color: #FFFFFF;
}




                                            

                                        

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

                    

                    

                        

                         标签： 
                                                css
                                                scroll
                                                table
                                                border
                                                div
                                                url
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航