栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

QQ空间为例 | 制作下拉式导航条菜单+改变高度伸缩菜单

CSS教程 更新时间:发布时间: 百科书网 趣学号

自学web前段两个月,这是今天所完成的
链接描述

QQ空间日志,可以复制,粘贴





动画菜单

* { margin: 0; padding: 0; font-size: 14px; }
a { color: #533; text-decoration: none }
ul{ list-style: none; }
.nav ul {float:left;}


.on:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;}

.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;margin-top:20px;}
.nav li { float: left; position:relative; height:30px; width:120px }
.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
.subNav li a{ background:#ddd }
.subNav li a:hover{ background:#F54921}








转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/243423.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号