百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html下拉菜单怎么做
分享文章到:

html下拉菜单怎么做

发布时间:09/01 来源:未知 浏览: 关键词:
许多人学习html之后,想动手实践一下一些特效,许多人都想写二级菜单,那么,html下拉菜单如何做?今天就来分享一下下拉菜单如何做?

html下拉菜单怎么做

二级菜单其实并不难,一样状况下都是使用li标签和ul标签配合使用,第一步第一我们要先把html的构造写出来,包括头部和主体部分,然后我们在li标签里放一个ul标签,并在li标签内放入我们要跳转的链接和要显示的字体,如下所示:

html下拉菜单怎么做

以上结果是一个简便的结果图,但是我们想要的二级菜单相差还是很大的。

下面我们给二级菜简单个样式,把二级菜单此前的菜单之间的margin和padding设定为0。代码如下:

<style>
*{
magin:0px;
padding:0;
}
</style>

其次就是设定一下选中器的次序,div>ul>li,这时候我们就把不需要的li全部向左浮动。只要我们设定了浮动,就快完成二级菜单的制作了。

div>ul>li{float:left;}

接下来我们要把li的中小圆点去除,去除小圆点我们可以使用list-style-type:none停止设定,并且给设定一个高度和背景色彩。

html下拉菜单怎么做

最后一步就是把下面的菜单设定成潜藏,display:none;代码如下:

  li{    
      list-style-type:none;    
      width: 208px;    
      height: 5epx;    
      text-align: center    
      Line-height:50px;    
      background:lightblue;}

以上就是html下拉菜单如何做的全部介绍,假如你想理解更多有关Html5教程,请关注百分百源码网。

以上就是html下拉菜单如何做的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板