资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

web前端入门到实战:html基础—下拉式菜单

一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口。一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间。接下来我教大家写单击菜单栏中的菜单命令将会出现一个下拉菜单。

创新互联建站主营琼中黎族网站建设的网络公司,主营网站建设方案,成都app开发,琼中黎族h5小程序设计搭建,琼中黎族网站营销推广欢迎琼中黎族等地区企业咨询

1.HTML页面


2.css样式

/*清除原样式*/ * { margin: 0px; padding: 0px; border: 0px;
} ul { list-style: none;
} a { text-decoration: none;
}
/*一级菜单样式*/ #nav { width: 1000px; height: 40px; margin: 0px auto; background: #f00; font-size: 18px; font-family: 微软雅黑;
} #nav ul li { float: left;
        /*包含块*/ position:relative;
    } #nav ul li a { display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; color: #fff;
        } #nav ul li a:hover { color: #ffd800; background: #970606;
            }
/*二级菜单样式*/ #nav ul li ul { position:absolute; top:40px; left:0px; display:none;
        } #nav ul li ul li { float:none;
            } #nav ul li ul li a{ background:#f00; border-top:1px solid #ccc;
            }
            /*一级菜单悬停时二级菜单可见*/ #nav ul li:hover ul { display:block;
        }
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

效果如图:

web前端入门到实战:html基础—下拉式菜单

web前端入门到实战:html基础—下拉式菜单


新闻标题:web前端入门到实战:html基础—下拉式菜单
转载来源:http://www.cdkjz.cn/article/geoehi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220