从品牌网站建设到网络营销策划,从策略到执行的一站式服务
如何利用HTML+CSS制作简单的下拉菜单?很多人都不太了解,今天小编为了让大家更加了解HTML+CSS制作简单的下拉菜单的方法,所以给大家总结了以下内容,一起往下看吧。
在制作HTML下拉菜单时,会用到很多CSS属性,比如:hover,list-style,float浮动,display属性等等,如有不清楚的小伙伴可以看看我以前的文章,之前都有介绍过,或者访问 CSS3视频教程 。
实例示范:制作一个导航,当鼠标经过“学习视频”时,会显示相关的课程分类,比如JavaScript,C++等等,具体代码如下:
HTML部分:
CSS部分:
*{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{width: 150px; float:left; line-height:40px; text-align:center; position:relative;} #nav ul li a{ text-decoration:none; color:#000; display:block;text-align: center;} #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}
效果图:
以上就是如何利用HTML+CSS制作简单的下拉菜单的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联建站行业资讯!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图