如何利用HTML+CSS制作简单的下拉菜单-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

如何利用HTML+CSS制作简单的下拉菜单

如何利用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制作简单的下拉菜单

以上就是如何利用HTML+CSS制作简单的下拉菜单的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!


网站栏目:如何利用HTML+CSS制作简单的下拉菜单
链接URL:http://kswsj.cn/article/jcdhso.html

其他资讯